Canvas Design Skill

When to use

• Creating generative art and abstract compositions
• Designing visual assets with HTML Canvas or SVG
• Building data visualizations as art
• Creating unique brand assets and illustrations

Canvas setup

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio || 1;
canvas.width = 1200 * dpr;
canvas.height = 800 * dpr;
canvas.style.width = "1200px";
canvas.style.height = "800px";
ctx.scale(dpr, dpr);