Canvas

canvas.clearRect(0, 0, canvas.width, canvas.height);

var canvas = new Canvas();
this.widget.add(canvas);

// Set line width
canvas.lineWidth = 10;

// Wall
canvas.strokeRect(75, 140, 150, 110);

// Door
canvas.fillRect(130, 190, 40, 60);

// Roof
canvas.beginPath();
canvas.moveTo(50, 140);
canvas.lineTo(150, 60);
canvas.lineTo(250, 140);
canvas.closePath();
canvas.stroke();

Extends

• Widget

Members

fillStyle :color|gradient

See:

• MDN web docs for details.

Type:

• color | gradient

font :font

See:

• MDN web docs for details.

Type:

• font

globalAlpha :Number

See:

• MDN web docs for details.

Type:

• Number

globalCompositeOperation :String

See:

• MDN web docs for details.

Type:

• String

height :Number

Overrides:

• Widget#height

Type:

• Number

lineCap :String

See:

• MDN web docs for details.

Type:

• String

lineDashOffset :Number

See:

• MDN web docs for details.

Type:

• Number

lineJoin :String

See:

• MDN web docs for details.

Type:

• String

lineWidth :Number

See:

• MDN web docs for details.

Type:

• Number

miterLimit :Number

See:

• MDN web docs for details.

Type:

• Number

opacity :Number

Overrides:

• Widget#opacity

Type:

• Number

rotation :Number

Overrides:

• Widget#rotation

Type:

• Number

strokeStyle :color|gradient

See:

• MDN web docs for details.

Type:

• color | gradient

textAlign :String

See:

• MDN web docs for details.

Type:

• String

textBaseline :String

See:

• MDN web docs for details.

Type:

• String

width :Number

Overrides:

• Widget#width

Type:

• Number

x :Number

Overrides:

• Widget#x

Type:

• Number

y :Number

Overrides:

• Widget#y

Type:

• Number

Methods

arc(x, y, radius, startAngle, endAngle, anticlockwiseopt)

See:

• MDN web docs for details.

Example

// The arc is given an x-coordinate of 100, a y-coordinate of 75, and a radius of 50. 
// To make a full circle, the arc begins at an angle of 0 radians (0°), and ends at an angle of 2π radians (360°).
var ctx = new Canvas();
this.widget.add(ctx);
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

Parameters:

arcTo(x1, y1, x2, y2, radius)

See:

• MDN web docs for details.

Example

// In this example, the path created by arcTo() is thick and black. Tangent lines are gray, control points are red, and the start point is blue.
var ctx = new Canvas();
this.widget.add(ctx);
// Tangential lines
ctx.beginPath();
ctx.strokeStyle = 'gray';
ctx.moveTo(200, 20);
ctx.lineTo(200, 130);
ctx.lineTo(50, 20);
ctx.stroke();

// Arc
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.moveTo(200, 20);
ctx.arcTo(200,130, 50,20, 40);
ctx.stroke();

// Start point
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.arc(200, 20, 5, 0, 2 * Math.PI);
ctx.fill();

// Control points
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.arc(200, 130, 5, 0, 2 * Math.PI); // Control point one
ctx.arc(50, 20, 5, 0, 2 * Math.PI);   // Control point two
ctx.fill();

Parameters:

beginPath()

See:

• MDN web docs for details.

Example

var ctx = new Canvas();
this.widget.add(ctx);
// First path
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// Second path
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

See:

• MDN web docs for details.

Example

// This example shows how a cubic Bézier curve is drawn.
var ctx = new Canvas();
this.widget.add(ctx);
// Define the points as {x, y}
let start = { x: 50,    y: 20  };
let cp1 =   { x: 230,   y: 30  };
let cp2 =   { x: 150,   y: 80  };
let end =   { x: 250,   y: 100 };

// Cubic Bézier curve
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
ctx.stroke();

// Start and end points
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // Start point
ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // End point
ctx.fill();

// Control points
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Control point one
ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Control point two
ctx.fill();

Parameters:

clearRect(x, y, width, height)

See:

• MDN web docs for details.

Parameters:

clip()

See:

• MDN web docs for details.

Example

var ctx = new Canvas();
this.widget.add(ctx);
// Create circular clipping region
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.clip();
// Draw stuff that gets clipped
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, ctx.width, ctx.height);
ctx.fillStyle = 'orange';
ctx.fillRect(0, 0, 100, 100);

closePath()

See:

• MDN web docs for details.

Example

var ctx = new Canvas();
this.widget.add(ctx);
// Draw a triangle
ctx.beginPath();
ctx.moveTo(20, 140);   // Move pen to bottom-left corner
ctx.lineTo(120, 10);   // Line to top corner
ctx.lineTo(220, 140);  // Line to bottom-right corner
ctx.closePath();       // Line to bottom-left corner
ctx.stroke();

createImageData(width, height) → {ImageData}

Since:

• EasyBuilder Pro V6.06.02

Example

const imageData = canvas.createImageData(100, 50);

Parameters:

Returns:

Type

ImageData

createLinearGradient(x0, y0, x1, y1) → {CanvasGradient}

See:

• MDN web docs for details.

Example

var ctx = new Canvas();
this.widget.add(ctx);
// Create a linear gradient
// The start gradient point is at x=20, y=0
// The end gradient point is at x=220, y=0
var gradient = ctx.createLinearGradient(20,0, 220,0);

// Add three color stops
gradient.addColorStop(0, 'green');
gradient.addColorStop(.5, 'cyan');
gradient.addColorStop(1, 'green');

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 100);

Parameters:

Returns:

Type

CanvasGradient

createRadialGradient(x0, y0, r0, x1, y1, r1) → {CanvasGradient}

See:

• MDN web docs for details.

Example

// This example initializes a radial gradient using the createRadialGradient() method. Three color stops between the gradient's two circles are then created. Finally, the gradient is assigned to the canvas context, and is rendered to a filled rectangle.
var ctx = new Canvas();
this.widget.add(ctx);
// Create a radial gradient
// The inner circle is at x=110, y=90, with radius=30
// The outer circle is at x=100, y=100, with radius=70
var gradient = ctx.createRadialGradient(110,90,30, 100,100,70);

// Add three color stops
gradient.addColorStop(0, 'pink');
gradient.addColorStop(.9, 'white');
gradient.addColorStop(1, 'green');

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 160, 160);

Parameters:

Returns:

Type

CanvasGradient

fill()

See:

• MDN web docs for details.

Example

// Fills a rectangle with the fill() method.
var ctx = new Canvas();
this.widget.add(ctx);
ctx.rect(10, 10, 150, 100);
ctx.stroke();

fillRect(x, y, width, height)

See:

• MDN web docs for details.
• Canvas#strokeRect for hollowed rectangle.

Example

var ctx = new Canvas();
this.widget.add(ctx);
ctx.fillStyle = 'green';
ctx.fillRect(20, 10, 150, 100);

Parameters:

fillText(text, x, y)

See:

• MDN web docs for details.

Example

var ctx = new Canvas();
this.widget.add(ctx);
ctx.font = '50px serif';
ctx.fillText('Hello world', 50, 90);

Parameters:

getImageData(sx, sy, sw, sh) → {ImageData}

Since:

• EasyBuilder Pro V6.06.02

Example

canvas.rect(10, 10, 100, 100);
canvas.fill();

let imageData = canvas.getImageData(0, 0, 50, 50);
canvas.putImageData(imageData, 150, 10);

Parameters:

Returns:

Type

ImageData

getLineDash() → {Array.Number}

See:

• MDN web docs for details.

Example

var ctx = new Canvas();
this.widget.add(ctx);
ctx.setLineDash([10, 20]);
console.log(ctx.getLineDash());  // [10, 20]

Returns:

Type

Array.Number

isPointInPath(x, y) → {Boolean}

See:

• MDN web docs for details.

Example

// Check if a point is within the current path.
var ctx = new Canvas();
this.widget.add(ctx);
ctx.rect(10, 10, 100, 100);
ctx.fill();
console.log(ctx.isPointInPath(30, 70));

Parameters:

Returns:

Type

Boolean

lineTo(x, y)

See:

• MDN web docs for details.

Example

var ctx = new Canvas();
this.widget.add(ctx);
// A line begins at (30, 50) and ends at (150, 100).
ctx.beginPath();       // Start a new path
ctx.moveTo(30, 50);    // Move the pen to (30, 50)
ctx.lineTo(150, 100);  // Draw a line to (150, 100)
ctx.stroke();          // Render the path

Parameters:

measureText(text) → {Object}

Example

let text = canvas.measureText('Hello world');
console.log(text.width);

Parameters:

Returns:

Type

Object

moveTo(x, y)

See:

• MDN web docs for details.

Parameters:

putImageData(imageData, dx, dy)

Since:

• EasyBuilder Pro V6.06.02

Example

let canvas = new Canvas();
let mouseArea = new MouseArea();

this.widget.add(canvas);
this.widget.add(mouseArea);

// Create gradient
var grd = canvas.createLinearGradient(0, 0, canvas.width - 20, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
canvas.fillStyle = grd;
canvas.fillRect(10, 10, canvas.width - 20, canvas.height - 20);

mouseArea.on('mousedown', (mouseEvent) => {
  const rvalue = getRandomInt(255);
  const gvalue = getRandomInt(255);
  const bvalue = getRandomInt(255);

  let imageData = canvas.createImageData(10, 10);
  for (let i = 0; i < imageData.data.length; i += 4) {
    imageData.data[i + 0] = rvalue;
    imageData.data[i + 1] = gvalue;
    imageData.data[i + 2] = bvalue;
    imageData.data[i + 3] = 255;
  }
  canvas.putImageData(imageData, mouseEvent.x - 5, mouseEvent.y - 5);
});

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

Parameters:

quadraticCurveTo(cpx, cpy, x, y)

See:

• MDN web docs for details.

Example

// This example shows how a quadratic Bézier curve is drawn.
var ctx = new Canvas();
this.widget.add(ctx);
// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

// Start and end points
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 * Math.PI);   // Start point
ctx.arc(50, 100, 5, 0, 2 * Math.PI);  // End point
ctx.fill();

// Control point
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 * Math.PI);
ctx.fill();

Parameters:

rect(x, y, width, height)

See:

• MDN web docs for details.

Example

// The rectangle's corner is located at (10, 20). It has a width of 150 and a height of 100.
var ctx = new Canvas();
this.widget.add(ctx);
ctx.rect(10, 20, 150, 100);
ctx.fill();

Parameters:

restore()

See:

• MDN web docs for details.

rotate(angle)

See:

• MDN web docs for details.

Parameters:

save()

See:

• MDN web docs for details.

scale(x, y)

See:

• MDN web docs for details.

Parameters:

setLineDash(segments)

See:

• MDN web docs for details.

Example

// This example uses the setLineDash() method to draw a dashed line above a solid line.
var ctx = new Canvas();
this.widget.add(ctx);
// Dashed line
ctx.beginPath();
ctx.setLineDash([5, 15]);
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

// Solid line
ctx.beginPath();
ctx.setLineDash([]);
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.stroke();

Parameters:

setTransform(a, b, c, d, e, f)

See:

• MDN web docs for details. // This example skews a rectangle both vertically (.2) and horizontally (.8). Scaling and translation remain unchanged. var ctx = new Canvas(); this.widget.add(ctx); ctx.transform(1, .2, .8, 1, 0, 0); ctx.fillRect(0, 0, 100, 100);

Parameters:

stroke()

See:

• MDN web docs for details.

Example

// Creates a rectangle using the rect() method, and then draws it to the canvas using stroke().
var ctx = new Canvas();
this.widget.add(ctx);
ctx.rect(10, 10, 150, 100);
ctx.stroke();

strokeRect(x, y, width, height)

See:

• MDN web docs for details.
• Canvas#fillRect for filled rectangle.

Example

var ctx = new Canvas();
this.widget.add(ctx);
ctx.strokeStyle = 'green';
ctx.strokeRect(20, 10, 160, 100);

Parameters:

strokeText(text, x, y)

See:

• MDN web docs for details.

Example

var ctx = new Canvas();
this.widget.add(ctx);
ctx.font = '50px serif';
ctx.strokeText('Hello world', 50, 90);

Parameters:

transform(a, b, c, d, e, f)

See:

• MDN web docs for details.

Example

// This example skews a rectangle both vertically (.2) and horizontally (.8). Scaling and translation remain unchanged.
var ctx = new Canvas();
this.widget.add(ctx);
ctx.transform(1, .2, .8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

Parameters:

translate(x, y)

See:

• MDN web docs for details.

Example

// The translate() method translates the context by 110 horizontally and 30 vertically. The first square is shifted by those amounts from its default position.
var ctx = new Canvas();
this.widget.add(ctx);
// Moved square
ctx.translate(110, 30);
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 80, 80);

// Reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

// Unmoved square
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, 80, 80);

Parameters: