Canvas

From WebOS101

Jump to: navigation, search

Contents

Introduction

WebOS supports a limited set of commands related to the canvas tag, as of webOS 1.4.5. The canvas tag provides a 2D drawing API, including image drawing, and primitives like rectangles and circles. This page may cover some of how to use the canvas in webOS, it does not cover how to use the canvas more generally. For that I'd recommend an outside source. The Mozilla Canvas tutorials are excellent, and the canvas spec sheet is available from a link at the bottom of the page.

Using the Canvas Tag

This covers the generalities of using the canvas tag. We'll get to targeting it for a specific device a little farther down. Let's say you have a scene called main. In the html of a scene, include a canvas tag as follows:

<canvas id="myCanvas" width=320 height=480 />

To draw on the canvas you must first get its context:

//inside the main-assistant.js:
MainAssistant.prototype = {
setup: function() {
this.ctx = this.controller.get("myCanvas").getContext("2d");
}
}

When you draw on the canvas, you draw to its context. The following bit of code draws a red rectangle at (10,10) with a width and height of 20px:

MainAssistant.prototype = {
setup: function() {
this.ctx = this.controller.get("myCanvas").getContext("2d");
this.ctx.fillStyle = "red";
this.ctx.fillRect(10,10,20,20);
}
}

Things you can't do with canvas as of 1.4.5

  • You cannot used getImageData functions, which means you cannot get pixel data from the canvas, and you cannot save the canvas as an image
  • SetTransform support is wonky. The origin of the canvas is always placed at the bottom left hand side of the canvas. Until SetTransform works as it should, it's recommended you avoid SetTransform, Rotate, or Translate, as they do not behave like a normal webkit distribution. This does not preclude you from making any applications, it just means you need to make them slightly differently.
  • There is no gradient support right now, so you can only draw solid colors.

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.

Tools

Useful Links

Retrieved from "http://webos101.com/Canvas"
Personal tools