Html5 Canvas Notes for Professionals

Chapter 1: Getting started with HTML5
Canvas
Section 1.1: Detecting mouse position on the canvas
This example will show how to get the mouse position relative to the canvas, such that 
(
0
,
0
)
will be the top-left
hand corner of the HTML5 Canvas. The 
e.
clientX
and 
e.
clientY
will get the mouse positions relative to the top of
the document, to change this to be based on the top of the canvas we subtract the 
left
and 
right
positions of the
canvas from the client X and Y.
var
canvas 
=
document.
getElementById
(
"myCanvas"
);
var
ctx 
=
canvas.
getContext
(
"2d"
);
ctx.
font
=
"16px Arial"
;
canvas.
addEventListener
(
"mousemove"
,
function
(
e
)
{
var
cRect 
=
canvas.
getBoundingClientRect
();
// Gets CSS pos, and width/height
var
canvasX 
=
Math.
round
(
e.
clientX
-
cRect.
left
);
// Subtract the 'left' of the canvas
var
canvasY 
=
Math.
round
(
e.
clientY
-
cRect.
top
);
// from the X/Y positions to make
ctx.
clearRect
(
0
,
0
,
canvas.
width
,
canvas.
height
);
// (0,0) the top left of the canvas
ctx.
fillText
(
"X: "
+
canvasX
+
", Y: "
+
canvasY
,
10
,
20
);
});
Runnable Example
The use of 
Math.
round
is due to ensure the 
x
,
y
positions are integers, as the bounding rectangle of the canvas may
not have integer positions.
Section 1.2: Canvas size and resolution
The size of a canvas is the area it occupies on the page and is defined by the CSS width and height properties.
canvas 
{
width 
:
1000px
;
height 
:
1000px
;
}
The canvas resolution defines the number of pixels it contains. The resolution is set by setting the canvas element
width and height properties. If not specified the canvas defaults to 300 by 150 pixels.
The following canvas will use the above CSS size but as the 
width
and 
height
is not specified the resolution will be
300 by 150.

id
=
"my-canvas"
>
This will result in each pixel being stretched unevenly. The pixel aspect is 1:2. When the canvas is stretched the
browser will use bilinear filtering. This has an effect of blurring out pixels that are stretched.
For the best results when using the canvas ensure that the canvas resolution matches the display size.
Following on from the CSS style above to match the display size add the canvas with the 
width
and 
height
set to
the same pixel count as the style defines.

id = 
"my-canvas"
width = 
"1000"
height = 
"1000"
>

---

GoalKicker.com – HTML5 Canvas Notes for Professionals
3
Section 1.3: Rotate
The 
rotate
(
r
)
method of the 2D context rotates the canvas by the specified amount 
r
of radians around the origin.
HTML

id
=
"canvas"
width
=240 
height
=240 
style
=
"background-color:#808080;"