1D Canvas Documentation

Below is a simple introduction to Opera's proposed 1D canvas context. This draws heavily on the existing HTML5 2D canvas with many methods being either removed (e.g. rotate, etc.) or updated to reduce the number of arguments needed (e.g. scale, etc.). A couple of new methods have also been added to make coding slightly easier.

To experiment with the exciting capabilities of a 1D canvas, the following script emulates the its functionality:

Download CanvasRenderingContext1D

1D Canvas API

As 2D Canvas except:

Added methods

clearLine(<float> x, <float> w)
Clear the canvas from the specified x co-ordinate (x) to the specified width (w).
drawLine(<float> x, <float> w)
Draw a line from the specified x co-ordinate (x) to the specified width (w).

Updated methods

scale(<float> x)
Increases or decreases the canvas units by the specified multiplier (x).
translate(<float> x)
Moves the canvas along the x-axis by the specified amount (x).
createLinearGradient(<float> x0, <float> x1)
Creates a gradient between the two specified points (x0, x1). Returns CanvasGradient.
moveTo(<float> x)
Moves the drawing point along the x-axis by the specified amount (x).
lineTo(<float> x)
Draws a line to the specified point (x).
isPointInPath(<float> x)
Checks whether the specified point (x) lies within the current path. Returns boolean.
drawImage(<Object> image, <float> sx, <float> sy, <float> sw, <float> dx, <float> dw)
Draws part or all of the specified image (image) The image is retrieved from the specified co-ordinates (sx, sy) with the specified width (sw). The data is drawn onto the canvas from the specified point on the x-axis (dx) with the specified width (dw).
createImageData(<float> sw)
Instantiates a blank ImageData object with the specified width (sw). Returns ImageData. N.B. The argument can also be an ImageData object.
getImageData(<float> sx, <float> sw)
Represents the underlying pixel data for the area of the canvas from the specified x co-ordinate (sx) with the specified width (sw). Returns ImageData.
putImageData(<ImageData> imagedata, <float> dx, <float> dirtyX, <float> dirtyY, <float> dirtyWidth)
Draws part or all of the specified imagedata object (imagedata) onto the canvas, starting at the specified x-coordinate (dx). Data is retrieved from the specified co-ordinates (dirtyX, dirtyY) with the specified width (dirtyWidth).

Removed methods