HTML5 Canvas example – an introduction to the basics: create a branded QR code Canvas widget!

The HTML5 Canvas element is a 2D drawing interface supported by most modern web browsers. Canvas enables a web developer to draw anything directly into a web browser natively, without the need for Java or Flash plugins.

While the Canvas API is fairly simple and straight forward, it is very robust.  Given its flexibility and freedom from plugins, I predict that Canvas is likely to become  the base building block of choice, that developers will leverage in constructing future web applications on desktop, tablet, and mobile devices.

To demonstrate the basic capabilities of the Canvas API, I have created a simple QR code widget, which can be used on websites, or printed out and placed on marketing materials.  To learn more about QR codes, please visit my two previous posts: Create a Quick Response Code (QR Code) image using Google Chart and Branding a Quick Response Code (QR Code) with a custom logo.
This blog post will introduce you to the following Canvas concepts
  •  Creating a Canvas context
  •  Writing text on the context
  •  Adding images to the context
  • Shadow and rotation treatments

 

Read more: https://www.ibm.com/developerworks/community/blogs/bobleah/entry/html5_canvas_example_an_introduction_to_the_basics_creating_a_branded_qr_code_widget_for_your_website_18?lang=en