canvasand JS API
In class today we saw a number of properties and methods which can be used to create simple vector paths in the canvas, and then ink the strokes and fills of those paths:
// paths context.beginPath(); context.closePath(); // lines context.moveTo(x, y); context.lineTo(x, y); context.quadraticCurveTo(controlX, controlY, endX, endY); // shapes context.rect(x, y, width, height); context.arc(x, y, radius, startAngle, endAngle, antiClockwise); // strokes context.lineWidth = 15; context.strokeStyle = '#ff0000'; context.stroke(); // fills context.fillStyle = 'yellow'; context.fill();
forloop to make a single drawing instruction happen more than once, automagically. Be sure the results of the loop can be easily seen, visually, in the canvas!
This lab is worth five marks. This lab is due at the beginning of next class.