Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Building and Drawing Paths

Published :
Author :
Adam Khoury
In this exercise we will cover building paths and the JavaScript path drawing methods on the canvas element. <!DOCTYPE html> <html> <head> <style> body{ margin:40px; background:#666; } #my_canvas{ background:#FFF; border:#000 1px solid; } </style> <script> function draw(){ var ctx = document.getElementById('my_canvas').getContext('2d'); // beginPath() // Resets the current default path // fill() // Fills subpaths on the current default path // stroke() // Strokes the current default path // clip() // Makes a clipping region out of a path // closePath() // Close current path // moveTo(x, y) // Creates a new subpath with the given point // lineTo(x, y) // creates a new line along the current subpath // isPointInPath(x, y) // Determines if a specified point is in a path // rect(x, y, w, h) // arc(x, y, radius, startAngle, endAngle, anticlockwise) // arcTo(x1, y1, x2, y2, radius) // x1, y1 are the subpath // quadraticCurveTo(cpx, cpy, x, y) cp = bezier control point // bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) } window.onload = draw; </script> </head> <body> <canvas id="my_canvas" width="500" height="350"></canvas> </body> </html>