VisLab

Donald Johnson's Weblog

Web-based Visualization

Title: Javascript Canvas
Category: Research
Posted by:
Previous: Turbo Gears Function/Object Chain
Next: Paper Summaries

The javascript canvas is a 2D display widget avaliable on Firefox, Safari, and Opera. The is are plugins that make the widget avaliable for IE. Placing a canvas in a web page is almost identical to placing a picture the <canvas> element requires 3 attributes: height, width, and id. Placing a canvas results in a blank rectangle of the specified hieght and width. All drawing on the canvas is done with a javascript calls. 
 
The canvas 2D api is quite advanced and has support for the following operations. 
 
Canvas State Methods 
 
* restore - restore canvas to last saved state 
* rotate - rotate the coordinate space 
* save - save the canvas state 
* scale - scale the cordiante space 
* translate - translate the cordinate space 
 
Working With Paths 
 
* arc  
* arcTo 
* bezierCurveTo 
* beginPath 
* clip 
* closePath 
* lineTo 
* moveTo 
* quadraticCurveTo 
* rect 
 
Stroking a Path 
 
* stroke 
* strokeRect 
 
Filling an Area 
 
* clearRect 
* fill 
* fillRect 
 
Creating Gradient and Pattern Styles 
 
* addColorStop 
* createLinearGradient 
* createPattern 
* createRadialGradient 
 
Drawing an Image 
 
* drawImage 
* drawImageFromRect 

Login Information
Username:
Password:

© Donald Johnson. The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by Mississippi State University.