Canvas
From WebOS101
Contents |
Introduction
HTML5 introduced the Canvas element for creating a drawable area in HTML. webOS, as of version 1.2.1, has limited canvas support.
Using the Canvas Tag
In order to use the canvas you must include one on your scene. The canvas tag is often specified in the scene's view. You should specify the width and height of the desired canvas. You may also wish to apply a CSS style to the element to fix its position on your scene.
<canvas id="myCanvas" width=200 height=200 />
To draw on the canvas you must first get its context:
this.ctx = $("myCanvas").getContext("2d");
Once the context has been retrieved you can begin to draw on the canvas. The most basic canvas functions involve drawing lines. Here is a simple example to draw a red square with a black border:
this.ctx.fillStyle = "red";
this.ctx.strokeStyle = "black";
this.ctx.beginPath();
this.ctx.moveTo(50,50);
this.ctx.lineTo(150,50);
this.ctx.lineTo(150,150);
this.ctx.lineTo(50,150);
this.ctx.closePath();
this.ctx.fill();
this.ctx.stroke();
Unimplemented Functions
- No imageData functions or objects are implemented
Common Problems
- Do not test on Firefox or Safari first. webOS currently renders differently from desktop browsers.
- Combinations of rotates and translates can cause problems with path functions.
- clearRect() currently clears the whole canvas, ignoring the arguments. Use fillRect() to clear sub-regions.
- The 9-argument version of drawImage() is working differently than the specification and other implementations. Rather than "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)", the webOS version is "drawImage(image, sx, sy, sWidth, sHeight, dx1, dy1, dx2, dy2)", where (dx1,dy1) and (dx2,dy2) are coordinates for the corners of a rectangle instead of the upper left corner and width/height. Maintain compatibility with web browsers by translating the canvas before drawing the image and locating the image at the origin, so that both the width/height and coordinate versions are equivalent.
- The webOSdev "Canvas Tag Support" page [1] reports that "destination-in" compositing is working for images, and it is not.
- Specifying the size of the canvas tag in CSS does not work correctly. Specify the width/height in the tag itself. You can apply other styling via CSS.
