JavaScript Paint App JavaScript Canvas API

Posted by Derek Banas on May 6, 2019 in Web Design | 0 comments

In this tutorial I start creating a JavaScript Paint Application while exploring all that is possible with the JavaScript Canvas API. We’ll create a paint app that allows for Opening, Saving and the use of Brushes, Lines, Rectangles, Circles, Ellipses and Polygons. Each tool will work with the rubber band effect like other advanced paint apps.
I will add on to this series if you guys want me to. If this series averages 10,000 views I will continue adding functionality.

Icons used in the Video

This 16 minute video only contains one 5 second skippable ad. If you value free tutorials like this, please consider turning off your Ad Blocking software.

Code From the Video

Jstut7.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">        
        <meta name="viewport" content="width = device-width, initial-scale = 1">
        <title>JavaScript Paint App</title>
        <link rel="stylesheet" type="text/css" href="mainstyle.css">
        <script src="jscolor.js"></script>
        <script src="jstut7-2.js"></script>
        
    </head>
    <body>
        <div class="wrapper">
 
            <div class="toolbar">
                <a class="selected" href="#" id="open" onclick="OpenImage()"><img src="open-icon.png"></a>
                <a href="#" id="save" onclick="SaveImage()"><img src="save-icon.png"></a>
                <a href="#" id="brush" onclick="ChangeTool('brush')"><img src="brush-icon.png"></a>
                <a href="#" id="line" onclick="ChangeTool('line')"><img src="line-icon.png"></a>
                <a href="#" id="rectangle" onclick="ChangeTool('rectangle')"><img src="rectangle-icon.png"></a>
                <a href="#" id="circle" onclick="ChangeTool('circle')"><img src="circle-icon.png"></a>
                <a href="#" id="ellipse" onclick="ChangeTool('ellipse')"><img src="ellipse-icon.png"></a>
                <a href="#" id="polygon" onclick="ChangeTool('polygon')"><img src="polygon-icon.png"></a>
            </div><br>
<canvas id="my-canvas" width="600" height="600"></canvas>
            <div id="img-data-div">
                <a href="#" id="img-file" download="image.png">download image</a>
            </div>
 
        </div>
    </body>
</html>

mainstyle.css

.wrapper {
    max-width: 900px;
    margin: auto;
    font-family: "Arial";
}

.toolbar{
    width: 100%;
    background-color: #444444;
    overflow: auto;
}

.toolbar a {
    float: left;
    width: 11%;
    text-align: center;
    padding: 6px 5px;
    transition: all 0.5s ease;
    color: white;
}

/* Change color on hover */
.toolbar a:hover {
    background-color: #000;
  }

/* Change color on selected icon */
.selected {
    background-color: #000; 
}

#my-canvas{
    width: 100%;
    border: 3px solid #000000;
}

#img-data-div{
    width: 100%;
    max-width: 900px;
    height: 200px;
}

/* Resize image to container */
.toolbar a img{
    max-width:100%;
    height:auto;
}

JSTUT7.JS

// JavaScript Paint App JavaScript Canvas API

// Reference to the canvas element
let canvas;
// Context provides functions used for drawing and 
// working with Canvas
let ctx;
// Stores previously drawn image data to restore after
// new drawings are added
let savedImageData;
// Stores whether I'm currently dragging the mouse
let dragging = false;
let strokeColor = 'black';
let fillColor = 'black';
let line_Width = 2;
let polygonSides = 6;
// Tool currently using
let currentTool = 'brush';
let canvasWidth = 600;
let canvasHeight = 600;

// Stores size data used to create rubber band shapes
// that will redraw as the user moves the mouse
class ShapeBoundingBox{
    constructor(left, top, width, height) {
        this.left = left;
        this.top = top;
        this.width = width;
        this.height = height;
    }
}

// Holds x & y position where clicked
class MouseDownPos{
    constructor(x,y) {
        this.x = x,
        this.y = y;
    }
}

// Holds x & y location of the mouse
class Location{
    constructor(x,y) {
        this.x = x,
        this.y = y;
    }
}

// Holds x & y polygon point values
class PolygonPoint{
    constructor(x,y) {
        this.x = x,
        this.y = y;
    }
}
// Stores top left x & y and size of rubber band box 
let shapeBoundingBox = new ShapeBoundingBox(0,0,0,0);
// Holds x & y position where clicked
let mousedown = new MouseDownPos(0,0);
// Holds x & y location of the mouse
let loc = new Location(0,0);

// Call for our function to execute when page is loaded
document.addEventListener('DOMContentLoaded', setupCanvas);

function setupCanvas(){
    // Get reference to canvas element
    canvas = document.getElementById('my-canvas');
    // Get methods for manipulating the canvas
    ctx = canvas.getContext('2d');
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = line_Width;
    // Execute ReactToMouseDown when the mouse is clicked
    canvas.addEventListener("mousedown", ReactToMouseDown);
    // Execute ReactToMouseMove when the mouse is clicked
    canvas.addEventListener("mousemove", ReactToMouseMove);
    // Execute ReactToMouseUp when the mouse is clicked
    canvas.addEventListener("mouseup", ReactToMouseUp);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

Jstut7.html

<!doctype html>

<head>

<title>JavaScript Paint App</title>

</head>

<body>

</div><br>

<a href="#" id="img-file" download="image.png">download image</a>

</div>

</body>

</html>

mainstyle.css

.wrapper {

max-width: 900px;

margin: auto;

font-family: "Arial";

}

.toolbar{

width: 100%;

background-color: #444444;

overflow: auto;

}

.toolbar a {

float: left;

width: 11%;

text-align: center;

padding: 6px 5px;

transition: all 0.5s ease;

color: white;

}

/* Change color on hover */

.toolbar a:hover {

background-color: #000;

}

/* Change color on selected icon */

.selected {

background-color: #000;

}

#my-canvas{

width: 100%;

border: 3px solid #000000;

}

#img-data-div{

width: 100%;

max-width: 900px;

height: 200px;

}

/* Resize image to container */

.toolbar a img{

max-width:100%;

height:auto;

}

JSTUT7.JS

// JavaScript Paint App JavaScript Canvas API

// Reference to the canvas element

let canvas;

// Context provides functions used for drawing and

// working with Canvas

let ctx;

// Stores previously drawn image data to restore after

// new drawings are added

let savedImageData;

// Stores whether I'm currently dragging the mouse

let dragging = false;

let strokeColor = 'black';

let fillColor = 'black';

let line_Width = 2;

let polygonSides = 6;

// Tool currently using

let currentTool = 'brush';

let canvasWidth = 600;

let canvasHeight = 600;

// Stores size data used to create rubber band shapes

// that will redraw as the user moves the mouse

class ShapeBoundingBox{

constructor(left, top, width, height) {

this.left = left;

this.top = top;

this.width = width;

this.height = height;

}

// Holds x & y position where clicked

class MouseDownPos{

constructor(x,y) {

this.x = x,

this.y = y;

}

// Holds x & y location of the mouse

class Location{

constructor(x,y) {

this.x = x,

this.y = y;

}

// Holds x & y polygon point values

class PolygonPoint{

constructor(x,y) {

this.x = x,

this.y = y;

}

// Stores top left x & y and size of rubber band box

let shapeBoundingBox = new ShapeBoundingBox(0,0,0,0);

// Holds x & y position where clicked

let mousedown = new MouseDownPos(0,0);

// Holds x & y location of the mouse

let loc = new Location(0,0);

// Call for our function to execute when page is loaded

document.addEventListener('DOMContentLoaded', setupCanvas);

function setupCanvas(){

// Get reference to canvas element

canvas = document.getElementById('my-canvas');

// Get methods for manipulating the canvas

ctx = canvas.getContext('2d');

ctx.strokeStyle = strokeColor;

ctx.lineWidth = line_Width;

// Execute ReactToMouseDown when the mouse is clicked

canvas.addEventListener("mousedown", ReactToMouseDown);

// Execute ReactToMouseMove when the mouse is clicked

canvas.addEventListener("mousemove", ReactToMouseMove);

// Execute ReactToMouseUp when the mouse is clicked

canvas.addEventListener("mouseup", ReactToMouseUp);

}

	Facebook
	YouTube
	Twitter
	LinkedIn

JavaScript Paint App JavaScript Canvas API

Leave a Reply Cancel reply