Adding Gradients
Step 01: Insert a canvas element in the body if you don’t already have one or just want a new one.
<br /><canvas id="myDrawing" width="400" height ="225"><br /><%%KEEPWHITESPACE%%> <--Whatever words you put here will appear if someone's browser doesn't support canvas--><br /></canvas><br />
Step 02: Write some javascript in the head of your document. An example follows below:
<br /><script type="application/x-javascript"><br /><%%KEEPWHITESPACE%%> window.onload = function() {<br /><%%KEEPWHITESPACE%%> var c = document.getElementById("myDrawing");<br /><%%KEEPWHITESPACE%%> var myStyle = c.getContext("2d");<br /><%%KEEPWHITESPACE%%> var myGradient = myStyle.createLinearGradient(0, 0, 100, 0);<br /><%%KEEPWHITESPACE%%> myGradient.addColorStop(0, "#ffffff");<br /><%%KEEPWHITESPACE%%> myGradient.addColorStop(1, "#000000");<br /><%%KEEPWHITESPACE%%> myStyle.fillStyle = myGradient;<br /><%%KEEPWHITESPACE%%> myStyle.fillRect(25, 25, 125, 125);<br /><%%KEEPWHITESPACE%%> }<br /></script><br />
Step 03: Save your document and refresh. You should see something like this:
Step 04: You can also test out a radial gradient. The code is almost the same but a radial gradient takes in more arguments:
<br /><br /><script type="application/x-javascript"><br />window.onload = function() {<br />var g = document.getElementById("anotherCanvas");<br /><%%KEEPWHITESPACE%%> var canvasStyle = g.getContext("2d");<br /><%%KEEPWHITESPACE%%> var myGradient2 = canvasStyle.createRadialGradient(160,120,0,160,120,200);<br /><%%KEEPWHITESPACE%%> myGradient2.addColorStop(0, "#ffffff");<br /><%%KEEPWHITESPACE%%> myGradient2.addColorStop(1, "#000000");<br /><%%KEEPWHITESPACE%%> canvasStyle.fillStyle = myGradient2;<br /><%%KEEPWHITESPACE%%> canvasStyle.fillRect(25, 25, 125, 125);<br />}<br /></script><br />
With the above code you should see something like this below in your new canvas.
