Index

Table of contents

html5 canvas

hello world
<html>
    <style>
        canvas {
            background: grey;
        }
    </style>
    <canvas></canvas>
</html>
access canvas from javascript
<script>
canvas = document.querySelector('canvas');
</script>
maximize canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

drawing

get drawing context
var c = canvas.getContext('2d');
clear the canvas
c.clearRect(0, 0, canvas.width, canvas.height);
get size of canvas in pixels
var width = Math.round(window.devicePixelRatio * canvas.width);
var height = Math.round(window.devicePixelRatio * canvas.height);
device pixel discussion
https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

text

write text (filled)
c.fillStyle = "blue";
c.fillText(new Date(), 10, 20);
no fill
c.strokeStyle = "blue";
c.strokeText(new Date(), 10, 20);
change font (using css font string)
c.font = "10px Courier";
c.font = "20px Arial";
c.font = "30px Comic Sans MS";
write some text and add a line of the same length as the text above and below
c.font = "20px Arial";
var text = "" + new Date();
var calc = c.measureText(text);
console.log(calc);

c.moveTo(0, 10);
c.lineTo(calc.width, 10);
c.stroke();
c.fillText(text, 0, 30);
c.moveTo(0, 40);
c.lineTo(calc.width, 40);
c.stroke();

shapes

draw a line
c.beginPath();
c.moveTo(x1, y1);
c.lineTo(x2, y2);
c.lineWidth = 10;
c.strokeStyle = "blue";
c.stroke();
extend a line
c.moveTo(x1, y1);
c.lineTo(x2, y2);
c.lineTo(x3, y3);
draw complete a line path and fill the contents
c.moveTo(100, 200);
c.lineTo(300, 200);
c.lineTo(200, 100);
c.fillStyle = "green";
c.fill();
c.strokeStyle = "black";
c.stroke();
draw just the outline of a line path
c.moveTo(100, 200);
c.lineTo(300, 200);
c.lineTo(200, 100);
c.closePath();
c.strokeStyle = "black";
c.stroke();
draw a rectangle
c.strokeStyle = "blue"
c.strokeRect(x, y, w, h)
fill a rectangle
c.fillStyle = "blue"
c.fillRect(x, y, w, h)
draw an arc (circle)
angle1 = 0;
angle2 = 2 * Math.PI;
c.beginPath();
c.arc(x, y, radius, angle1, angle2)
c.strokeStyle = 'yellow';
c.stroke();
counter clockwise
counterclockwise = true;
c.arc(x, y, radius, angle1, angle2, counterclockwise)

styles

defining a fill style
c.fillStyle = "blue"                     # color name
c.fillStyle = "#00F"                     # hex color
c.fillStyle = 'rgba(0, 0, 255)'          # without alpha
c.fillStyle = 'rgba(0, 0, 255, 0.5)'     # with alpha

shadow

shadow properties
c.shadowColor = "yellow";
c.shadowOffsetX = 20;
c.shadowOffsetY = 20;
shadowBlur is the distance over which the shadow extends outward from the path
c.shadowBlur = 20;
add shadow around box (glowing box)
c.shadowBlur = 20;
c.shadowColor = "yellow";
c.fillStyle = "red";
c.fillRect(100, 100, 100, 100);
disable shadow
c.shadowBlur = 0;

gradients

arguments of createLinearGradient
createLinearGradient(x0, y0, x1, y1)
x0 x-coordinate (relative to canvas) of the start point of gradient
y0 y-coordinate (relative to canvas) of the start point of gradient
x1 x-coordinate (relative to canvas) of the end point of gradient
y1 y-coordinate (relative to canvas) of the end point of gradient
creating a linear gradient
var gradient = c.createLinearGradient(x, y, x, y+h);
gradient.addColorStop(0, "#060");
gradient.addColorStop(1, "#0B0");
c.fillStyle = gradient;
c.fillRect(x, y, w, h);
multistep gradient
var gradient = c.createLinearGradient(x, y, x, y+h);
gradient.addColorStop(0,   "#060");
gradient.addColorStop(0.5, "#0B0");
gradient.addColorStop(1,   "#000");
horizontal gradient
c.createLinearGradient(x, y, x, y+h);
vertical gradient
c.createLinearGradient(x, y, x+w, y);

images

draw an image
var img = new Image();
img.src = "//vignette2.wikia.nocookie.net/tomandjerryfan/images/9/99/Jerry_Mouse.jpg/revision/latest?c
c.drawImage(img, x, y, w, h);

transformations

draw with a translation relative to the origin
c.fillRect(100, 10, 100, 20);
c.translate(100, 100);
c.fillRect(100, 10, 100, 20);
draw with a rotation of 45 degrees relative to the origin
c.fillRect(100, 0, 100, 20);
c.rotate(45/180 * Math.PI);
c.fillRect(100, 0, 100, 20);
translate and rotate
c.fillRect(100, 10, 100, 20);
c.translate(100, 100);
c.rotate(45/180 * Math.PI);
c.fillRect(100, 10, 100, 20);

animation

animation example
function animation() {
	requestAnimationFrame(animation);
	c.clearRect(0, 0, canvas.width, canvas.height);
	c.fillStyle = "blue";
	c.fillRect(x, y, w, h);
	x += dx;
	if (x + w >= canvas.width) {
		dx = -speed;
	}
	if (x <= 0) {
		dx = speed;
	}
}
animation();

events

following the mouse
canvas.addEventListener('mousemove', function(event) {
	c.clearRect(0, 0, canvas.width, canvas.height);
	c.fillText("x = " + event.x + "; y = " + event.y, 10, 20);
});

save & restore stack

save current transformation matrix, clipping region and color settings
c.save()
pop stack
c.restore()

references

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
https://www.html5canvastutorials.com/tutorials/html5-canvas-element/