Building from Part 1, 2, and 3, we’re now ready to create a canvas overlay that sits above a html page, and where user can draw on. Here are the steps that we will use: Step 1: Create the canvas. Step 2: Create a function that draws on the canvas based on the mouse position. […]
For your reference, here’s Part 1 and Part 2. If the example doesn’t work, it was because Part 1 and 2 uses the same variables. Open this guide as a separate page to fix it. Also remember that you need a browser that supports Canvas, such as Firefox 3. Before you start drawing lines, you […]
This example uses Canvas to flip an image. For introduction to Canvas, please see https://www.permadi.com/tutorial/jsCanvasGrayscale/index.html. With Canvas, developers gains the access to pixels data of any images loaded. To flip an image, we can iterate every row of the image and copy the pixels backward. Please upgrade your browser function flipImage(image) { var myCanvas=document.createElement(“canvas”); var […]
