ctx is short for Context, which allows us to draw 2-D things on the canvas.
The context object will let you draw lots of shapes!
ctx.fillRect(x , y , width , height )
Drawing a circle is a little trickier...
ctx.beginPath()
ctx.arc(x , y , radius , 0 , Math.PI * 2 )
ctx.closePath()
ctx.fill()
And we can also draw using images:
var pic = new Image
pic.src = "http://www.aie.edu.au/newbrand/assets/img/aie-logo.png"
function draw () {
// ctx is short for "context"
ctx.clearRect(0 , 0 , canvas.width, canvas.height)
ctx.drawImage(pic, x , y )
// or...
ctx.drawImage(pic, x , y , width , height )
...
You can also change the context's colour that it draws with:
ctx.fillStyle = "colour"
This colour can be represented in multiple ways:
"blue" // literal
"#FFAA00" // hex Code
"rgb(r , g , b )" // red, green, blue
"rgba(r , g , b , a )" // red, green, blue, alpha
Writing text is also possible:
ctx.font = "18px Arial" // the size and type of font
ctx.fillText("Hello" , x , y )
And we can write out variables as well:
var name = "Michael"
var age = 15
ctx.fillText("Hello " + name + " aged " + age , x , y )