Drawing Tool

Example link icon

Basic Features

Step 1: Make a box for the drawing area.

Step 2: Put a canvas in the box.
Hint: Make a <canvas> tag. Set the width and height in HTML, not in CSS:
<canvas width="400" height="400"></canvas>
Step 3: Add event listeners to the canvas for when the user holds down the mouse, moves it around, and releases it.
Hint: Use the mousedown, mousemove, and mouseup event types:
yourCanvasVariable.addEventListener("mousedown", startDrawing);
yourCanvasVariable.addEventListener("mousemove", draw);
yourCanvasVariable.addEventListener("mouseup", stopDrawing);
Step 4: Draw on the canvas when the user holds down the mouse, moves it around, and releases it.
Hint: Use the beginPath, lineTo, stroke, and closePath methods:
function startDrawing() {
    // start a new line
    yourCanvasVariable.getContext("2d").beginPath();
}

function draw(event) {
    // get the mouse coordinates relative to the box
    var x = event.offsetX;
    var y = event.offsetY;

    // move the pen to the mouse coordinates
    yourCanvasVariable.getContext("2d").lineTo(x, y);

    // draw a line
    yourCanvasVariable.getContext("2d").stroke();
}

function stopDrawing() {
    // end the line
    yourCanvasVariable.getContext("2d").closePath();
}

Step 5: Prevent drawing on the canvas when the user is not holding down the mouse.
Hint: When the mouse is moved around, check that the user has held down the mouse before drawing a line.

Step 6: Start drawing when the user moves the mouse on the canvas with the mouse held down.
Hint: Use the mouseenter event type:
yourCanvasVariable.addEventListener("mouseenter", startDrawing);
Then check if the user is holding down the mouse by checking the MouseEvent buttons property:
function startDrawing(event) {
    // check if the left mouse button is pressed
    if (event.buttons == 1) {
        // your code here
    }
}
Step 7: Stop drawing when the user moves the mouse off the canvas.
Hint: Use the mouseout event type:
yourCanvasVariable.addEventListener("mouseout", stopDrawing);
Step 8: Make an input for the user to choose a line color.
Hint: Set the strokeStyle property:
yourCanvasVariable.getContext("2d").strokeStyle = yourInputVariable.value;
Step 9: Make an input for the user to choose a line width.
Hint: Set the lineWidth property:
yourCanvasVariable.getContext("2d").lineWidth = yourInputVariable.value;

Drag and Drop

Step 1: Find an image to drag and drop, and put it on your page.

Step 2: Allow the image to be dragged.
Hint: Add the draggable attribute to the image:
<img src="yourImageFile" draggable="true">
Step 3: Allow elements to be dragged over the canvas.
Hint: Use the dragover event type:
yourCanvasVariable.addEventListener("dragover", dragOver);

function dragOver(event) {
    // the default browser action is to disallow elements from being dragged over
    // this prevents the default browser action from happening
    event.preventDefault();
}
Step 4: Position the image in the box when the user drags and drops it on the canvas.
Hint: Use the drop event type.
Note: You cannot put elements directly in a <canvas> tag:
yourCanvasVariable.addEventListener("drop", drop);

function drop(event) {
    // get the mouse coordinates relative to the box
    var x = event.offsetX;
    var y = event.offsetY;

    // write code here to position the image in the box
}

Step 5: Find another image to drag and drop, and enable both images to be placed on the canvas.
Hint: Use the dragstart event type on the images.

Debugging help

Last topic Next topic