1.2

Helpfulness: 0
Set Details Share
created 3 years ago by garbage
5 views
<canvas>
show moreless
Page to share:
Embed this setcancel
COPY
code changes based on your size selection
Size:
X
Show:
1

basic call to canvas

<canvas id="surface" width="500" height="500>

your browser does not support HTML5

</canvas>

2

posistion of the top left corner of a canvas (x, y)

(0,0)

3

Bottom right of canvas with heigh of 400 and width of 600

(600, 400)

4

JS function to access <canvas>

window.onload = function () {

var surface = document.getElementById("surface";

var ctxt = surface.getContext("2d");

5

<canvas> supports 3d context

false, but possibly seeing in the near future.

6

Methods: beginPath

beginPath: Resets/begins a new drawing path

7

Methods: moveTo

Moves the context to the point set in the beginPath method

8

Methods: lineTo

Sets the destination end point for the line.

9

Methods: stroke

Strokes the line, which makes the line visible

10

sample method calls:

ctxt.beginPath();

ctxt.moveTo(10,10);

ctxt.lineTo(225,350);

ctxt.stroke();

Draws a line that starts at top left and moves towards the bottom right.

11

sample properties:

ctxt.lineWidth = 5;

ctxt.strokeStyle = '#0f0';

Changes lineWidth property, and also changes the the line color with strokeStyle property.

12

Drawing Curves Methods:

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

A standar arc based on a starting and ending angle and a defined radius

X Y - Center of the circle

radius - Length of the distance from the center point of the circle to curve

startAngle, endAngle - starting and ending angles of the arc to be drawn. This is measuered in radians, not degrees

counterclockwise - drawing direction of the arc.

ctxt.arc(150, 100, 75, 0, 2 * Math.PI, false);

13

Drawing Curves methods:

quadradicCurveTo(controlX, controlY, endX, endY)

A more complex arc that allows you to control the steepness o the curve

ctxt.quadradicCurveTo(

14

Drawing Curves Method:

bezierCurveTo

like quad, but except that it has two control points instead of the one.

15

Drawing rect mathod:

rect(x,y,width,height)

draws a rectangle

to center.. :

var x, y;

x=150;

y=75;

ctxt.rect(300-(x/2), 200-(y/2), x, y);

ctxt.stroke();

16

Fill in the shapes with this method

ctxt.fillStyle = "blue";

ctxt.fill();

Rectangles get a special method called fillRect();

17

Creating a gradient involves using this object

CanvasGradient

using the createLinearGradient on the object. then assign the object to the fillStyle property.

18

Drawing an Image

var img = new Image();

img.src="orange.jpg";

img.onload = function() {

ctxt.drawImage(img,0,0);

ctxt.stroke();

}

19

Draw text on cavas

ctxt.strokeText("Text goes here", 100, 100)

Must be done on window finishing loading.

properties include:

font e.g font = "24px Arial";

strokeStyle: fills in with border color

fillStyle: fill color in without border

textAlign