Canvas is a rectangular region in your web page where you can draw 2D shapes using JavaScript, and also render bitmap images. It is used for graphs, animations, images, photo compositions, real-time video processing, and games. This recipe shows you how to use the Canvas in your jQuery Mobile app.
Copy the full code of this recipe from the code/11/canvas
folder. You can launch this code using the URL: http://localhost:8080/11/canvas/main.html
.
The steps to be followed are:
Create
main.html
with its page content having acanvas
element:<div data-role='content'> <canvas id="myCanvas" width="500" height="500"> Canvas is not supported on your browser </canvas> </div>
Add the following script to get the 2D context, and then draw two rectangles:
$('#main').live('pageinit', function(event) { var cxt = $('#myCanvas')[0].getContext("2d"); cxt.fillStyle = '#5f98c5'; cxt.fillRect(20,20, 100, 100); cxt.strokeRect...