How to store Brush Size and Brush Color in a Drawing Web app

Question

So I want to create a drawing app, and I did, I am able to change brush size and brush color, however, I want to save the stuff I draw including the brush size and the brush color. I am able to store the point I have drawn on the canvas now, but not the brush size and color.

 var canvas;
 var context;
 var color = "black";
 var brushSize = 13;
 var mouseDown = false;


window.onload = function init() {
//Brush Size
var bigBrushSize        = document.getElementById("bigBrush");
bigBrushSize.onclick    = handleBigBrushclicked;

var mediumBrushSize     = document.getElementById("mediumBrush");
mediumBrushSize.onclick = handleMediumBrushclicked;

var smallBrushSize      = document.getElementById("smallBrush");
smallBrushSize.onclick  = handleSmallBrushclicked;
//Brush Color
var redBrushColor       = document.getElementById("red");
redBrushColor.onclick   = handleRedBrushColorclicked;

var blueBrushColor      = document.getElementById("blue");
blueBrushColor.onclick  = handleBlueBrushColorclicked;

var yellowBrushColor    = document.getElementById("yellow");
yellowBrushColor.onclick = handleYellowBrushColorclicked;

var greenBrushColor     = document.getElementById("green");
greenBrushColor.onclick = handleGreenBrushColorclicked;
//Clear Button
var clearButton         = document.getElementById("clearButton");

clearButton.onclick     = handleClearButton;

canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
canvas.onmousedown = handleMouseDown;
canvas.onmouseup = handleMouseUp;
canvas.onmousemove = handleMouseMove;

var coords = localStorage["coords"];
if (coords) {
    coords = JSON.parse(coords);

    for (var i = 0; i < coords.length; i = i + 2) {
        paintToCanvas(coords[i], coords[i + 1]);
    }
}
}


function handleClearButton() {
context.clearRect(0, 0, canvas.width, canvas.height);

localStorage.removeItem("coords");
 }

function handleMouseDown(event) {
paintFromMouse(event);

mouseDown = true;
}

function handleMouseUp(event) {
mouseDown = false;
}

function handleMouseMove(event) {
if (mouseDown) {
    paintFromMouse(event);
}
}

// Bursh Size Start

function handleBigBrushclicked() {

brushSize = 32;

}

function handleMediumBrushclicked() {

brushSize = 16;

}

function handleSmallBrushclicked() {

brushSize = 6;

}

// Brush Size Ends

function paintFromMouse(event) {
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;

paintToCanvas(x, y);

var coords = localStorage["coords"];
if (coords) {
    coords = JSON.parse(coords);
} else {
    coords = [];
}
coords.push(x);
coords.push(y);
localStorage.setItem("coords", JSON.stringify(coords));
}

//color change starts

function handleRedBrushColorclicked() {
color = "red";
}

function handleBlueBrushColorclicked() {
color = "blue";
 }

function handleGreenBrushColorclicked() {
color = "green";
}

function handleYellowBrushColorclicked() {
color = "yellow";
}


// color change ends

function paintToCanvas(x, y) {
context.fillStyle = color;
context.fillRect(x - brushSize / 2, y - brushSize / 2, brushSize, brushSize);

So here I used the local storage to store brush size and color, the alert shows it seems to work, but I still don't know how to actually store them, which means, if I refresh my page, nothing changes on my canvas.

var storeColorAndBrush = [color "  ", brushSize]
var store = storeColorAndBrush
localStorage.setItem("store",store)

alert(localStorage.store);

}

Thank you very much, I am a beginner.

Answer 1

This is how I would do it: I would add a "save" button which, when clicked, stores the whole image and the current brush size and color. When you load the page you draw the stored image in the canvas and set the brush size and color:

$('.save').on('click',function() {
    var data = context.getImageData(x, y, img.width, img.height).data;
    localStorage.setItem('image', data); // save image data
    localStorage.setItem('brushSize', brushSize);
    localStorage.setItem('color', color);
}); 

on load:

brushSize = localStorage.getItem('brushSize');
color = localStorage.getItem('color');
var picture = localStorage.getItem('image');
context.putImageData(picture, 0, 0);