{"id":5747,"date":"2014-01-03T05:15:02","date_gmt":"2014-01-02T18:15:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5747"},"modified":"2014-01-03T05:15:02","modified_gmt":"2014-01-02T18:15:02","slug":"htmljavascript-canvas-rainbow-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-rainbow-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Canvas Rainbow Primer Tutorial"},"content":{"rendered":"
\"HTML\/Javascript<\/a>

HTML\/Javascript Canvas Rainbow Primer Tutorial<\/p><\/div>\n

The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.<\/p>\n

In today’s tutorial we touch on a couple of the two dimensional Javascript functions to draw a rectangle or arc, but in the two dimensional context, canvas HTML elements can be used to draw text, lines, boxes and circles as well. We also touch on two functions to create a linear<\/a> or radial<\/a> gradient to the fillStyle and\/or strokeStyle of your HTML element placed onto the canvas.<\/p>\n

You may want to read more at HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial javascript – How do I add a simple onClick event handler to a canvas element? – Stack Overflow<\/a>.<\/p>\n

As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n

Link to some downloadable HTML programming code … rename to canvasrainbow.html<\/a>\n<\/p>\n

Here is a new link to some downloadable HTML programming source code explaining changes made (from HTML\/Javascript Canvas Primer Tutorial<\/a>) here<\/a>.<\/p>\n

You’ll notice heavy use of the Javascript Math.random()<\/a> function.<\/p>\n

We hope you enjoy this tutorial as a rainbow coloured live run<\/a>.<\/p>\n

Yes … you’ve reached the end … have a top supportive rainbow coloured day!<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n