What is Canvas ?
The HTML5 Canvas element <canvas> can be used to draw graphics via scripting in JavaScript.
For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video
processing or rendering
For me I found the best place to start is with the w3schools tutorials
w3schools.com HTML5 Canvas
I was trying out a silly idea of re utilising my UK tax disc holder after they became made redundant
by the DVLA.
I came up with this solution using canvas.
You can see a number of points drawn using the canvas elenments to make the parking permit
- Text
- Lines
- Circles
- Shapes
- Graduated Colours
- Alignments
It all started with the basic html document
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px dashed #000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>
For sanity sake I must mention that comments can be for single lines preceeded with two forward slashes like this //
If you need to comment out one or more lines you can use forward slash and asterix /* and finish with asterix forward slash */
Good use of remarks or comments will help you when you look back at your code at a later date.
Next we need to start to add the js wrapped in the <script> <\script> tags.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');Then all the circles and arcs are made up using context.arc with syntax:
context.arc(x,y,radius,startAngle,endAngle, counterclockwise);
How to use arc is explained at http://www.w3schools.com/tags/canvas_arc.asp'
Next looked at creating a linear gradient object. to fill the main background circle.
// syntax: context.createLinearGradient(x0,y0,x1,y1);
var gradienta=context.createLinearGradient(0,0,0,300);
/* MAIN DISC WITH PINK GRADUATED BACKGROUND */
context.beginPath();
context.arc(250, 250, 200, 0, 2 * Math.PI);
gradienta.addColorStop(0,'#FF9999');
gradienta.addColorStop(1,'#FFCCFF');
context.fillStyle = gradienta;
context.fill();
Next looked at creating a radial gradient object. to fill the small circle.
// syntax context.createRadialGradient(x0, y0, r0, x1, y1, r1)
var gradientb=context.createRadialGradient(250, 300, 200, 0, 220, 220);
/* GREEN SMALL DISC */
context.beginPath();
// Create an arc/curve (used to create circles, or parts of circles)
context.arc(250, 396, 54, 0, 2 * Math.PI);
context.strokeStyle = '#e6ffb3';
gradientb.addColorStop(0,'green');
gradientb.addColorStop(1,'#efc');
context.fillStyle = gradientb;
context.fill();
Next it gets slightly more maths orientated I needed to create a shape like a trapezium but with curved sides.
To achive this I drew both of the small arcs and allowed canvas to close the paths
Using arc, I needed the centre of the circle where x=250 and y=250 a radius of 200
and if you imagine the circumference as a piece of string then think of the
starting point 0 as 3 O'clock
0.5 as 6 O'clock
1 as 9 O'clock
1.5 as 12 O'clock
end point as 3'oclock
Chosing math points around the circumference to produce the shape I wanted.
/* ARC SIDED TRAPEZIUM FOR REG NO */
// syntax context.arc(x,y,radius,startAngle,endAngle);
context.beginPath();
context.arc(250, 250, 200, 1.03 * Math.PI, 1.17 * Math.PI);
context.arc(250, 250, 200, 1.83 * Math.PI, 1.97 * Math.PI);
context.closePath();
context.strokeStyle = '#4d9900';
context.stroke();
context.fillStyle = '#4d9900';
context.fill();
This creates my coloured shape as shown below
Similarly use of arc to produce the top shape
/* CLOSED ARC FOR PCOP NUMBER AT TOP OF DISC */
context.beginPath();
context.fillStyle = '#86b300';
context.arc(250, 250, 200, 1.25 * Math.PI, 1.75 * Math.PI);
context.closePath();
context.strokeStyle = '#86b300';
context.stroke();
context.fill();
This time its one longer arc and then close path.
