Skip to content

HTML Canvas CheatSheet

Canvas is an HTML element that is used to draw graphics, on the fly, via scripting (usually JavaScript). The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element.

The canvas is a rectangular area on an HTML page. By default, the canvas has no border and no content. The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it.

The <canvas> element has only two attributes, width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering, the image is scaled to fit its layout size: if the CSS sizing doesn’t respect the ratio of the initial canvas, it will appear distorted.

Basic Setup

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
</script>

Basic Canvas API

// Change canvas size
canvas.width = 800;  // pixels
canvas.height = 600; // pixels

Transformations

// Save current state
ctx.save();                             

// Restore saved state
ctx.restore();                          

// Move canvas origin
ctx.translate(x, y);                    

// Rotate canvas
ctx.rotate(angleRadians);  

// Scale canvas
ctx.scale(scaleX, scaleY);           

// Transform matrix
ctx.transform(a, b, c, d, e, f);       

// Reset and transform
ctx.setTransform(a, b, c, d, e, f);    

Shadows

// Shadow color
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';

// Shadow blur amount
ctx.shadowBlur = 5;                    

// Shadow X offset
ctx.shadowOffsetX = 5;                 

// Shadow Y offset
ctx.shadowOffsetY = 5;                  

Drawing a Rectangle

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 150, 100);
</script>

Drawing a Circle

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 2 * Math.PI);
    ctx.stroke();
</script>

Drawing a Line

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();
</script>

Drawing Text

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText("Hello World", 10, 50);
</script>

Drawing an Image

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    const img = new Image();
    img.src = "image.jpg";
    img.onload = function () {
        ctx.drawImage(img, 10, 10);
    };
</script>