Posts Tagged ‘canvas’

Canvas 7, Saving and Loading

The last version of my Canvas app let you pick different brushes and draw on the grid. If you played around with the line brush you might have noticed a small bug. The line erases everything it passes over.  This is because the line has no idea what the image was supposed to look like [...]

Read the rest of this entry »

Canvas Part 5

This time I’ve taking the actual drawing out of the canvas object so we can have different brushes. I’ve also included a bit of code to get the color from the current cell and compare it with a hex color.

Read the rest of this entry »

Canvas Part 4

If you’ve played around with the demos, then you might have noticed a little bug. If you click down in one square and let the mouse up in another square, the square you clicked down in will stay green. I haven’t addressed this issue in earlier examples because it’s not actually a bug. What I [...]

Read the rest of this entry »

Canvas Grid Part 3

Last time we managed to create a very simple grid and change colors when you clicked on a cell. But, being a first attempt the grid wasn’t flexible and it had a lot of duplicated code. In this post we are going to improve it.

Read the rest of this entry »

Drawing a Grid on Canvas

I’m going to need a Grid, so let’s start with a simple grid. A 2 by 2 grid will work just fine. There’s three ways to draw the grid, one is to draw filled rectangles, another is to just draw the outlines of the rectangles, and finally we could just draw a few lines. [...]

Read the rest of this entry »

Working with the Canvas element

One of the biggest problems I’ve been having with taking the KnitProject to the next level is drawing with JavaScript. This is where the Canvas element comes in.
If you’re an IE user you can leave right now, Unless you download some plugin, none of this will work. Frankly I don’t care about IE and don’t [...]

Read the rest of this entry »