18.11.2017 Views

html5_tutorial

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

HTML5<br />

// use getContext to use the canvas for drawing<br />

var ctx = canvas.getContext('2d');<br />

ctx.shadowOffsetX = 2;<br />

ctx.shadowOffsetY = 2;<br />

ctx.shadowBlur = 2;<br />

ctx.shadowColor = "rgba(0, 0, 0, 0.5)";<br />

ctx.font = "20px Times New Roman";<br />

ctx.fillStyle = "Black";<br />

}<br />

ctx.fillText("This is shadow test", 5, 30);<br />

else {<br />

alert('You need Safari or Firefox 1.5+ to see this demo.');<br />

}<br />

}<br />

<br />

<br />

<br />

<br />

<br />

<br />

HTML5 Canvas - Save and Restore States<br />

HTML5 canvas provides two important methods to save and restore the canvas states. The<br />

canvas drawing state is basically a snapshot of all the styles and transformations that have<br />

been applied and consists of the followings −<br />

<br />

<br />

<br />

The transformations such as translate, rotate and scale etc.<br />

The current clipping region.<br />

The current values of the following attributes: strokeStyle, fillStyle, globalAlpha,<br />

lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY,<br />

97

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!