Laboratorium Komputerowe Progmar
Marcin Załęczny

We are using cookies in the page. If you use the page you agree for the cookies.      Close

Html canvas element

Html canvas element gives us interface to draw onto the some area of webpage by using Javascript scripting language. We can draw both vector and bitmap graphics. Below there is a list of all or nearly all available methods and attributes and their short description. To draw something first we must obtain reference to cnavas element and next take from it its drawing context. The most simple example of drawing is presented below:

function draw_rects() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);

All of below functions and attributes we call on ctx object:

fillRect(x,y,width,height): Draws filled rectangle
strokeRect(x,y,width,height): Draws border of rectangle
clearRect(x,y,width,height): Clears fragment of canvas area
beginPath(): Begins drawing the path
closePath(): Ends drawing the path
stroke(): Draw line along the path
fill(): Fills the path with color
moveTo(x, y): Moves current drawing point to new location
lineTo(x, y): Draws the line from current to specified location
arc(x, y, radius, startAngle, endAngle, anticlockwise): Draws arc with specified parameters
quadraticCurveTo(cp1x, cp1y, x, y): Draws a curve with specified parameters
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): Draws Beziera curve with specified parameters
rect(x, y, width, height): Adds rectangular path to the current one
drawImage(image, x, y): Draws image onto the canvas. The image may be: existing image (document.getElementById('img_id'), image created on the fly: new Image('/url/of/image'), other canvas element: document.getElementById('other_canvas_id')
drawImage(image, x, y, width, height): Draws scaled image onto the canvas
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): Draws scaled image or its fragment onto the canvas
ctx.mozImageSmoothingEnabled = false; Gecko 1.9.2 introduced attribute mozImageSmoothingEnabled of canvas element. If it is false, then scaled images will not be smoothed during scaling. By default the attribute it is true.
ctx.fillStyle = color: Set fill color, ex: "orange", "#FFA500", "rgb(255,165,0)" or "rgba(255,165,0,1)"
ctx.strokeStyle = color: Set border color
ctx.globalAlpha = transparency: Set global transparency (it is applied to all newly drawed items). Its value is from 0.0 (full transparency) to 1.0 (full opaque)
ctx.lineWidth = value: Set border line width
ctx.lineCap = type: Sets type of beginning and ending of the line
ctx.lineJoin = type: Sets type of joining points for lines in path
ctx.miterLimit = value:
var gradient = createLinearGradient(x1,y1,x2,y2): Creates linear gradient at specified coordinates
var gradient = createRadialGradient(x1,y1,r1,x2,y2,r2): Creates radial gradient at specified coordinates
gradient.addColorStop(position, color): Adds to the gradient stop-point with specified color
var pattern = createPattern(image,type): Makes the pattern of the image
shadowOffsetX = float: Sets x-offset for the shadow of all new shapes
shadowOffsetY = float: Sets y-offset for the shadow of all new shapes
shadowBlur = float: Sets blur factor for the shadow of all new shapes
shadowColor = color: Sets the shadow color
fillText(text,x,y): Draws text onto the canvas
save(): Saves current canvas state onto the stack
restore(): Pick from the stack canvas state and restores it
translate(x, y): Make translation of the canvas with specified vector
rotate(angle): Rotate canvas with specified angle
scale(x, y): Scales canvas at x and y dimension with specified scaling factors
translate(0,canvas.height); scale(1,-1): After calling this two instructions we obtain well known Cartesian coordinating system (with origin in left bottom point)
transform(m11, m12, m21, m22, dx, dy): Make the canvas tranformation with specified transform matrix
setTransform(m11, m12, m21, m22, dx, dy):
globalCompositeOperation = type: Sets the mode of drawing shapes that have common (intersected) areas
clip(): Sets clipping area for drawing. If some part of drawed shape is outside the area, then it is not drawed.