Html5 Canvas Notes for Professionals

>


type
=
"button"
onclick
=
"rotate_ctx();"
>Rotate context
JavaScript
var
canvas 
=
document.
getElementById
(
"canvas"
);
var
ctx 
=
canvas.
getContext
(
"2d"
);
var
ox 
=
canvas.
width
/
2
;
var
oy 
=
canvas.
height
/
2
;
ctx.
font
=
"42px serif"
;
ctx.
textAlign
=
"center"
;
ctx.
textBaseline
=
"middle"
;
ctx.
fillStyle
=
"#FFF"
;
ctx.
fillText
(
"Hello World"
,
ox
,
oy
);
rotate_ctx 
=
function
()
{
// translate so that the origin is now (ox, oy) the center of the canvas
ctx.
translate
(
ox
,
oy
);
// convert degrees to radians with radians = (Math.PI/180)*degrees.
ctx.
rotate
((
Math.
PI
/
180
)
*
15
);
ctx.
fillText
(
"Hello World"
,
0
,
0
);
// translate back
ctx.
translate
(-
ox
,
-
oy
);
};
Live demo on JSfiddle
Section 1.4: Save canvas to image file
You can save a canvas to an image file by using the method 
canvas.
toDataURL
()
, that returns the data URI for the
canvas' image data.
The method can take two optional parameters 
canvas.
toDataURL
(
type
,
encoderOptions
)
: 
type
is the image
format (if omitted the default is 
image
/
png
); 
encoderOptions
is a number between 0 and 1 indicating image quality
(default is 0.92).
Here we draw a canvas and attach the canvas' data URI to the "Download to myImage.jpg" link.
HTML

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




id
=
"download"
download
=
"myImage.jpg"
href
=
""
onclick
=
"download_img(this);"
>Download to
myImage.jpg
JavaScript
var
canvas 
=
document.
getElementById
(
"canvas"
);

---

GoalKicker.com – HTML5 Canvas Notes for Professionals
4
var
ctx 
=
canvas.
getContext
(
"2d"
);
var
ox 
=
canvas.
width
/
2
;
var
oy 
=
canvas.
height
/
2
;
ctx.
font
=
"42px serif"
;
ctx.
textAlign
=
"center"
;
ctx.
textBaseline
=
"middle"
;
ctx.
fillStyle
=
"#800"
;
ctx.
fillRect
(
ox 
/
2
,
oy 
/
2
,
ox
,
oy
);
download_img 
=
function
(
el
)
{
// get image URI from canvas object
var
imageURI 
=
canvas.
toDataURL
(
"image/jpg"
);
el.
href
=
imageURI
;
};
Live demo
 on JSfiddle.
Section 1.5: How to add the Html5 Canvas Element to a
webpage
Html5-Canvas ...
Is an Html5 element.
Is supported in most modern browsers (Internet Explorer 9+).
Is a visible element that is transparent by default
Has a default width of 300px and a default height of 150px.
Requires JavaScript because all content must be programmatically added to the Canvas.
Example: Create an Html5-Canvas element using both Html5 markup and JavaScript:
>








id
=
'canvasHtml5'
>