JavaScript Paint App 2

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

In this part of my JavaScript Paint App tutorial I make the toolbar work, show how to get canvas mouse positions, save / redraw the canvas, create the rubber band system, find angles, convert to radians / degrees, save / import images and set up event handling. In the next video I’ll finish the whole app.

All of the code used is available below to help you learn. Here are the images used.

If you enjoy videos like this, consider donating $1 on Patreon. I’m planning way more original content on Patreon over the next few months. Also by donating a dollar, I will promote your website in my video descriptions for as long as you are a Patreon.

Code from the Video

JSTUT7.JS

// 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);
}

function ChangeTool(toolClicked){
    document.getElementById("open").className = "";
    document.getElementById("save").className = "";
    document.getElementById("brush").className = "";
    document.getElementById("line").className = "";
    document.getElementById("rectangle").className = "";
    document.getElementById("circle").className = "";
    document.getElementById("ellipse").className = "";
    document.getElementById("polygon").className = "";
    // Highlight the last selected tool on toolbar
    document.getElementById(toolClicked).className = "selected";
    // Change current tool used for drawing
    currentTool = toolClicked;
}

// Returns mouse x & y position based on canvas position in page
function GetMousePosition(x,y){
    // Get canvas size and position in web page
    let canvasSizeData = canvas.getBoundingClientRect();
    return { x: (x - canvasSizeData.left) * (canvas.width  / canvasSizeData.width),
        y: (y - canvasSizeData.top)  * (canvas.height / canvasSizeData.height)
      };
}

function SaveCanvasImage(){
    // Save image
    savedImageData = ctx.getImageData(0,0,canvas.width,canvas.height);
}

function RedrawCanvasImage(){
    // Restore image
    ctx.putImageData(savedImageData,0,0);
}

function UpdateRubberbandSizeData(loc){
    // Height & width are the difference between were clicked
    // and current mouse position
    shapeBoundingBox.width = Math.abs(loc.x - mousedown.x);
    shapeBoundingBox.height = Math.abs(loc.y - mousedown.y);

    // If mouse is below where mouse was clicked originally
    if(loc.x > mousedown.x){

        // Store mousedown because it is farthest left
        shapeBoundingBox.left = mousedown.x;
    } else {

        // Store mouse location because it is most left
        shapeBoundingBox.left = loc.x;
    }

    // If mouse location is below where clicked originally
    if(loc.y > mousedown.y){

        // Store mousedown because it is closer to the top
        // of the canvas
        shapeBoundingBox.top = mousedown.y;
    } else {

        // Otherwise store mouse position
        shapeBoundingBox.top = loc.y;
    }
}

// Returns the angle using x and y
// x = Adjacent Side
// y = Opposite Side
// Tan(Angle) = Opposite / Adjacent
// Angle = ArcTan(Opposite / Adjacent)
function getAngleUsingXAndY(mouselocX, mouselocY){
    let adjacent = mousedown.x - mouselocX;
    let opposite = mousedown.y - mouselocY;
 
    return radiansToDegrees(Math.atan2(opposite, adjacent));
}

function radiansToDegrees(rad){
    if(rad < 0){
        // Correct the bottom error by adding the negative
        // angle to 360 to get the correct result around
        // the whole circle
        return (360.0 + (rad * (180 / Math.PI))).toFixed(2);
    } else {
        return (rad * (180 / Math.PI)).toFixed(2);
    }
}

// Converts degrees to radians
function degreesToRadians(degrees){
    return degrees * (Math.PI / 180);
}

function ReactToMouseDown(e){
    // Change the mouse pointer to a crosshair
    canvas.style.cursor = "crosshair";
    // Store location 
    loc = GetMousePosition(e.clientX, e.clientY);
    // Save the current canvas image
    SaveCanvasImage();
    // Store mouse position when clicked
    mousedown.x = loc.x;
    mousedown.y = loc.y;
    // Store that yes the mouse is being held down
    dragging = true;
}
};

function ReactToMouseMove(e){
    canvas.style.cursor = "crosshair";
    loc = GetMousePosition(e.clientX, e.clientY);
};

function ReactToMouseUp(e){
    canvas.style.cursor = "default";
    loc = GetMousePosition(e.clientX, e.clientY);
    RedrawCanvasImage();
    UpdateRubberbandOnMove(loc);
    dragging = false;
    usingBrush = false;
}

// Saves the image in your default download directory
function SaveImage(){
    // Get a reference to the link element 
    var imageFile = document.getElementById("img-file");
    // Set that you want to download the image when link is clicked
    imageFile.setAttribute('download', 'image.png');
    // Reference the image in canvas for download
    imageFile.setAttribute('href', canvas.toDataURL());
}

function OpenImage(){
    let img = new Image();
    // Once the image is loaded clear the canvas and draw it
    img.onload = function(){
        ctx.clearRect(0,0,canvas.width, canvas.height);
        ctx.drawImage(img,0,0);
    }
    img.src = 'image.png';
    
}

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;
}

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

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

JSTUT7.JS

// 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);

}

function ChangeTool(toolClicked){

document.getElementById("open").className = "";

document.getElementById("save").className = "";

document.getElementById("brush").className = "";

document.getElementById("line").className = "";

document.getElementById("rectangle").className = "";

document.getElementById("circle").className = "";

document.getElementById("ellipse").className = "";

document.getElementById("polygon").className = "";

// Highlight the last selected tool on toolbar

document.getElementById(toolClicked).className = "selected";

// Change current tool used for drawing

currentTool = toolClicked;

}

// Returns mouse x & y position based on canvas position in page

function GetMousePosition(x,y){

// Get canvas size and position in web page

let canvasSizeData = canvas.getBoundingClientRect();

return { x: (x - canvasSizeData.left) * (canvas.width / canvasSizeData.width),

y: (y - canvasSizeData.top) * (canvas.height / canvasSizeData.height)

};

}

function SaveCanvasImage(){

// Save image

savedImageData = ctx.getImageData(0,0,canvas.width,canvas.height);

}

function RedrawCanvasImage(){

// Restore image

ctx.putImageData(savedImageData,0,0);

}

function UpdateRubberbandSizeData(loc){

// Height & width are the difference between were clicked

// and current mouse position

shapeBoundingBox.width = Math.abs(loc.x - mousedown.x);

shapeBoundingBox.height = Math.abs(loc.y - mousedown.y);

// If mouse is below where mouse was clicked originally

if(loc.x > mousedown.x){

// Store mousedown because it is farthest left

shapeBoundingBox.left = mousedown.x;

} else {

// Store mouse location because it is most left

shapeBoundingBox.left = loc.x;

}

// If mouse location is below where clicked originally

if(loc.y > mousedown.y){

// Store mousedown because it is closer to the top

// of the canvas

shapeBoundingBox.top = mousedown.y;

} else {

// Otherwise store mouse position

shapeBoundingBox.top = loc.y;

}

// Returns the angle using x and y

// x = Adjacent Side

// y = Opposite Side

// Tan(Angle) = Opposite / Adjacent

// Angle = ArcTan(Opposite / Adjacent)

function getAngleUsingXAndY(mouselocX, mouselocY){

let adjacent = mousedown.x - mouselocX;

let opposite = mousedown.y - mouselocY;

return radiansToDegrees(Math.atan2(opposite, adjacent));

}

function radiansToDegrees(rad){

if(rad < 0){

// Correct the bottom error by adding the negative

// angle to 360 to get the correct result around

// the whole circle

return (360.0 + (rad * (180 / Math.PI))).toFixed(2);

} else {

return (rad * (180 / Math.PI)).toFixed(2);

}

// Converts degrees to radians

function degreesToRadians(degrees){

return degrees * (Math.PI / 180);

}

function ReactToMouseDown(e){

// Change the mouse pointer to a crosshair

canvas.style.cursor = "crosshair";

// Store location

loc = GetMousePosition(e.clientX, e.clientY);

// Save the current canvas image

SaveCanvasImage();

// Store mouse position when clicked

mousedown.x = loc.x;

mousedown.y = loc.y;

// Store that yes the mouse is being held down

dragging = true;

}

};

function ReactToMouseMove(e){

canvas.style.cursor = "crosshair";

loc = GetMousePosition(e.clientX, e.clientY);

};

function ReactToMouseUp(e){

canvas.style.cursor = "default";

loc = GetMousePosition(e.clientX, e.clientY);

RedrawCanvasImage();

UpdateRubberbandOnMove(loc);

dragging = false;

usingBrush = false;

}

// Saves the image in your default download directory

function SaveImage(){

// Get a reference to the link element

var imageFile = document.getElementById("img-file");

// Set that you want to download the image when link is clicked

imageFile.setAttribute('download', 'image.png');

// Reference the image in canvas for download

imageFile.setAttribute('href', canvas.toDataURL());

}

function OpenImage(){

let img = new Image();

// Once the image is loaded clear the canvas and draw it

img.onload = function(){

ctx.clearRect(0,0,canvas.width, canvas.height);

ctx.drawImage(img,0,0);

}

img.src = 'image.png';

}

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;

}

	Facebook
	YouTube
	Twitter
	LinkedIn

JavaScript Paint App 2

Leave a Reply Cancel reply