Dart
Dart
HTML Canvas
HTML Canvas
Redis
Redis
Bash
Bash
JavaScript
JavaScript
HTML Canvas

HTML Canvas Cheat Sheet

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. HTML Canvas cheat sheet serves as a handy resource for developers, providing a rapid overview of syntax and techniques.

Frontend
Html
Javascript
Canvas

Getting the context

var canvas = document.getElementById('c') var c = canvas.getContext('2d')

Basic drawing

Basic drawing

// x = 10, y = 20, width = 200, height = 100 c.fillStyle = '#ff0000' c.strokeStyle = '#ff00ff' 
c.lineWidth = 5 c.lineCap = 'round' 
c.fillRect(10, 20, 200, 100) 
c.stroke() c.fill()

Saving and restoring

c.save() 
c.restore()

Saves: strokeStyle fillStyle globalAlpha lineWidth lineCap lineJoin miterLimit shadowOffsetX shadowOffsetY shadowBlur shadowColor globalCompositeOperation, Transformations (translate rotate scale transform setTransform), Clipping path

Animation

onframe: function() { c.clearRect(0, 0, w, h) }

Transformations

c.translate(0, 0) c.rotate(Math.PI*2/5) c.scale(1.0, 1.0)

To rotate along origin:

c.translate(ox, oy) c.rotate(theta) c.translate(-ox, -oy)

To scale along origin:

c.translate(-ox*x, -oy*y) c.scale(x, y) c.translate(ox/x, oy/y)

See MDN: Transformations.

Image drawing

c.drawImage(image, dx, dy, [dw, dh]); /* `image` can be HTML Image/Canvas/Video */

See MDN: Images.

Colors, styles shadows

c.strokeStyle = '#ff00ff'; c.fillStyle = '#ff00ff'; 
c.shadowOffsetX = 0; c.shadowOffsetY = 0; c.shadowOffsetBlur = 3.0; c.shadowColor = 'rgba(0,0,0,0.2)';

See MDN: Styles

Gradients

gr = c.createLinearGradient(x0,y0,x1,y1) gr = c.createRadialGradient(x0,y0,r0,x1,y1,r1) pat = c.createPattern(image, 'repeat-x') 
c.fillStyle = gr

Drawing

c.beginPath() c.moveTo(x,y) c.lineTo(x,y) c.quadraticCurveTo(cpx,cpy,x,y) c.bezierCurveTo(cp1x,cp1y,cp2x,cp2y) c.arcTo(...) c.arc(...) c.closePath()