HTML5 Canvasタグの解説と基本的な使い方

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

canvas.width canvas.height //specify the width and height of the canvas
canvas.getContext("2d"); //return the environment to draw in
context.moveTo(10,10) //draw from (10,10)
context.lineTo(100,100) //draw from (10,10) to (100,100)
context.stroke() //start drawing (lines)
context.lineWidth=3 //set the width of the line
context.strokeStyle="#f00" set the color of the line stroke strokes
context.fillStyle="rgb(255,0,0)"; context.fill() // coloring,, the color of the fill (color block)
context.beginPath(); //define a new path
context.closePath(); //used at the end of the path
  If the drawn path is not closed then it will be closed automatically, if you don't write closrPath then it will not be closed
//draw a 64*36 rectangle starting from the coordinates (20, 30)
  context.fillRect(20,30,64,36); //rect rectangle
//draw arcs and circles
context.arc(
 centetx,centery,radius, //Circle center coordinates and radius
 startingAngle,enddingAngle, //from which radian value and ending at which radian value
 anticlockwise=false //Optional, indicates whether to start drawing clockwise or counterclockwise.
  Default: clockwise. . true draws counterclockwise
)
//call the arc function
//draw an arc with (300,300) as the center and 200 as the radius, from 0 to 1.5 PI
context.arc(300,300,200,0,1.5*Math.PI)
//global variable
WINDOW_WIDTH=1024; WINDOW_HEIGHT=768;
//call global variables
canvas.width=WINDOW_WIDTH;
//render() function render(context);
renderDigit(0,0,parseInt(hours/10),ctx)