Tutorial by Examples | RIP Tutorial

Overview of the basic path drawing commands: lines and curves

================== TODO: Link each of the drawing commands below to their individual examples. I don't know how to do this since the links to the individual examples point towards the "draft" folder. TODO: Add examples for these path "action" commands: stroke(), fill(), clip() ...

html5-canvas • Path (Syntax only)

lineTo (a path command)

context.lineTo(endX, endY) Draws a line segment from the current pen location to coordinate [endX,endY] <!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid red; } </style> <script> window.onload=(fun...

html5-canvas • Path (Syntax only)

arc (a path command)

context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle) Draws a circular arc given a centerpoint, radius and starting & ending angles. The angles are expressed as radians. To convert degrees to radians you can use this formula: radians = degrees * Math.PI / 180;. Angle ...

html5-canvas • Path (Syntax only)

quadraticCurveTo (a path command)

context.quadraticCurveTo(controlX, controlY, endingX, endingY) Draws a quadratic curve starting at the current pen location to a given ending coordinate. Another given control coordinate determines the shape (curviness) of the curve. <!doctype html> <html> <head> <style...

html5-canvas • Path (Syntax only)

bezierCurveTo (a path command)

context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY) Draws a cubic Bezier curve starting at the current pen location to a given ending coordinate. Another 2 given control coordinates determine the shape (curviness) of the curve. <!doctype html> <html&gt...

html5-canvas • Path (Syntax only)

arcTo (a path command)

context.arcTo(pointX1, pointY1, pointX2, pointY2, radius); Draws a circular arc with a given radius. The arc is drawn clockwise inside the wedge formed by the current pen location and given two points: Point1 & Point2. A line connecting the current pen location and the start of the arc is au...

html5-canvas • Path (Syntax only)

rect (a path command)

context.rect(leftX, topY, width, height) Draws a rectangle given a top-left corner and a width & height. <!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid red; } </style> <script> window.onload...

html5-canvas • Path (Syntax only)

closePath (a path command)

context.closePath() Draws a line from the current pen location back to the beginning path coordinate. For example, if you draw 2 lines forming 2 legs of a triangle, closePath will "close" the triangle by drawing the third leg of the triangle from the 2nd leg's endpoint back to the firs...

html5-canvas • Path (Syntax only)

beginPath (a path command)

context.beginPath() Begins assembling a new set of path commands and also discards any previously assembled path. It also moves the drawing "pen" to the top-left origin of the canvas (==coordinate[0,0]). Although optional, you should ALWAYS start a path with beginPath The discarding ...

html5-canvas • Path (Syntax only)

lineCap (a path styling attribute)

context.lineCap=capStyle // butt (default), round, square Sets the cap style of line starting points and ending points. butt, the default lineCap style, shows squared caps that do not extend beyond the line's starting and ending points. round, shows rounded caps that extend beyond the ...

html5-canvas • Path (Syntax only)

lineJoin (a path styling attribute)

context.lineJoin=joinStyle // miter (default), round, bevel Sets the style used to connect adjoining line segments. miter, the default, joins line segments with a sharp joint. round, joins line segments with a rounded joint. bevel, joins line segments with a blunted joint. <!doctype...

html5-canvas • Path (Syntax only)

strokeStyle (a path styling attribute)

context.strokeStyle=color Sets the color that will be used to stroke the outline of the current path. These are color options (these must be quoted): A CSS named color, for example context.strokeStyle='red' A hex color, for example context.strokeStyle='#FF0000' An RGB color, for e...

html5-canvas • Path (Syntax only)

fillStyle (a path styling attribute)

context.fillStyle=color Sets the color that will be used to fill the interior of the current path. These are color options (these must be quoted): A CSS named color, for example context.fillStyle='red' A hex color, for example context.fillStyle='#FF0000' An RGB color, for example ...

html5-canvas • Path (Syntax only)

lineWidth (A path styling attribute)

context.lineWidth=lineWidth Sets the width of the line that will stroke the outline of the path <!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid red; } </style> <script> window.onload=(function(){...

html5-canvas • Path (Syntax only)

shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY (path styling attributes)

shadowColor = color // CSS color shadowBlur = width // integer blur width shadowOffsetX = distance // shadow is moved horizontally by this offset shadowOffsetY = distance // shadow is moved vertically by this offset This set of attributes will add a shadow around a path. Bo...

html5-canvas • Path (Syntax only)

createLinearGradient (creates a path styling object)

var gradient = createLinearGradient( startX, startY, endX, endY ) gradient.addColorStop(gradientPercentPosition, CssColor) gradient.addColorStop(gradientPercentPosition, CssColor) [optionally add more color stops to add to the variety of the gradient] Creates a reusable linear gradient (object...

html5-canvas • Path (Syntax only)

createRadialGradient (creates a path styling object)

var gradient = createRadialGradient( centerX1, centerY1, radius1, // this is the "display' circle centerX2, centerY2, radius2 // this is the "light casting" circle ) gradient.addColorStop(gradientPercentPosition, CssColor) gradient.addColorStop(gradientPerce...

html5-canvas • Path (Syntax only)

createPattern (creates a path styling object)

var pattern = createPattern(imageObject,repeat) Creates a reusable pattern (object). The object can be assigned to any strokeStyle and/or fillStyle. Then stroke() or fill() will paint the Path with the pattern of the object. Arguments: imageObject is an image that will be used as a patter...

html5-canvas • Path (Syntax only)

stroke (a path command)

context.stroke() Causes the perimeter of the Path to be stroked according to the current context.strokeStyle and the stroked Path is visually drawn onto the canvas. Prior to executing context.stroke (or context.fill) the Path exists in memory and is not yet visually drawn on the canvas. The unu...

html5-canvas • Path (Syntax only)

fill (a path command)

context.fill() Causes the inside of the Path to be filled according to the current context.fillStyle and the filled Path is visually drawn onto the canvas. Prior to executing context.fill (or context.stroke) the Path exists in memory and is not yet visually drawn on the canvas. Example code usi...

html5-canvas • Path (Syntax only)