Pixel Art Maker Tutorial - Using HTML5 Canvas

Hello and welcome to my pixel art maker tutorial. This was my final project for the Grow with Google Scholarship Program. By the end of this tutorial, you will have made a pixel art maker that looks something like this. So, clone this repo and let's get started!

Oh, and if you like what you see, be sure to follow me on twitter

Table of Contents

• Prerequisites
• Part 1: Setting up the Canvas
• Part 2: Responding to User Events
• Part 3: Drawing the Grid and the Squares
• Part 4: Event Listeners on the Cavas
• Licencing

Prerequisites

This tutorial assumes that you:

• Have a solid understanding of both Hypertext Markup Language (HTML) and Cascading Stylesheets (CSS)
• Have a least an intermediate understanding of JavaScript (I should not have to explain what an object is or the basics of DOM manipulation, though for some of the more advanced stuff, I will be giving brief explainations and providing links to documentation)
• Know enough about Git and Github to be able to either clone or fork this repo. Hey, if all else fails, just copy and paste the darn files.

Back to Top

Part 1

Setting up the Canvas and Drawing the Grid

In Part 1, we will be learning how to set up the canvas and learning how to draw a square and a line in the canvas. We will also be learning how to change the line color (ctx.strokeStyle) and the fill color (ctx.fillStyle).

Back to Top

Part 2

Responding to User Events

In part 2, we will learn how to redraw the grid every time the user clicks the submit button. We will also figure out how to find the coordinates of the mouse click when the user clicks on the canvas.

Back to Top

Part 3

Drawing the Squares and Setting up the Square Constructor

In Part 3, we will figure out how to draw the squares and even learn about teranry conditionals.

Back to Top

Part 4

Responding to Mouse Events on the Canvas

In Part 4, we will be adding event listeners to the canvas to draw sqaures where and when the user clicks on it. We will also be setting up the constructor function for the squares.

Back to Top

Licencing

Pixel Art Maker HTML5 Canvas Tutorial by Andrielle Hillis is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

In other words:

• If you create a derrivate work, you must credit me, as I have credited Udacity.
• You may not use this tutorial for commercial purposes.
• If you do create your own pixel art maker, or your own tutorial, you must release it under the exact same licence.

Further, if you are part of the Grow with Google Front-End Scholarship Program, you may not pass this Pixel Art Maker as your own. That would constitute plagurism, which is a violation of their Code of Conduct.