In my code, I want to change the color of drawings at every step; but, if I change the color at 3rd step also the colors in previous steps are also changed to 3rd step color. I want to do it my different colors. I have included 1 or 2 photos for better understanding.
Also, I want to my drawings draggable but, since I use canvas, I cannot use jquery-ui (.draggable) and also I cannot change my drawings' id because of canvas.
jQuery(document).ready(function($) {
//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//Variables
var canvasOffset = $("#canvas").offset();
var canvasx = canvasOffset.left;
var canvasy = canvasOffset.top;
var last_mousex = 0;
var last_mousey = 0;
var mousex = 0;
var mousey = 0;
var mousedown = false;
var shapes = [];
var width;
var height;
//Mousedown
$(canvas).on('mousedown', function(e) {
last_mousex = parseInt(e.clientX - canvasx);
last_mousey = parseInt(e.clientY - canvasy);
mousedown = true;
});
//Mouseup
$(canvas).on('mouseup', function(e) {
const lastPos = {
lastMouseX: last_mousex,
lastMouseY: last_mousey,
rectWidth: width,
rectHeight: height
};
shapes.push(lastPos);
mousedown = false;
});
//Mousemove
$(canvas).on('mousemove', function(e) {
mousex = parseInt(e.clientX - canvasx);
mousey = parseInt(e.clientY - canvasy);
if (mousedown) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
width = mousex - last_mousex;
height = mousey - last_mousey;
var col = $(".color").val();
if (shapes.length > 0) {
for (var i in shapes) {
ctx.rect(shapes[i].lastMouseX, shapes[i].lastMouseY, shapes[i].rectWidth, shapes[i].rectHeight);
}
}
ctx.rect(last_mousex, last_mousey, width, height);
ctx.strokeStyle = col;
ctx.lineWidth = 10;
ctx.stroke();
}
$("#canvas").mousedown(function(e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
handleMouseUp(e);
});
//Output
$('#output').html('current: ' + mousex + ', ' + mousey + '<br/>last: ' + last_mousex + ', ' + last_mousey + '<br/>mousedown: ' + mousedown);
});
});
.color {
border: 1px solid black;
font-family: 'Times New Roman', Times, serif;
font-size: 40px;
}
#canvas {
cursor: crosshair;
border: 1px solid #000000;
background-image: url("kroki2v3.png");
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
#output {
font-family: 'Times New Roman', Times, serif;
font-size: 40px;
}
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" maxlength="50" class="color" required />
<div id="container" style="display: none;"><img src="kroki2v3.png" id="img01" alt="" style="display: none;"></div>
<canvas id="canvas" width="3200" height="1400"></canvas>
<div id="output"></div>
</body>
</html>
I've made a few changes to your code:
make var col
a global variable
on mouse up save the color of the current rect: color:col
when you draw the shapes in the shapes
array you need to ctx.beginPath()
for every rect. Also you set the color of the stroke for every rect: ctx.strokeStyle = shapes[i].color;
Observation: you can use the strokeRect() method instead of rect()
and stroke()
In the code I've marked those points where I've made the changes. Read the comments.
jQuery(document).ready(function($) {
//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//Variables
var canvasOffset = $("#canvas").offset();
var canvasx = canvasOffset.left;
var canvasy = canvasOffset.top;
var last_mousex = 0;
var last_mousey = 0;
var mousex = 0;
var mousey = 0;
var mousedown = false;
var shapes = [];
var width;
var height;
// make var col a global variable
var col = "black";
//Mousedown
$(canvas).on('mousedown', function(e) {
last_mousex = parseInt(e.clientX - canvasx);
last_mousey = parseInt(e.clientY - canvasy);
mousedown = true;
});
//Mouseup
$(canvas).on('mouseup', function(e) {
const lastPos = {
lastMouseX: last_mousex,
lastMouseY: last_mousey,
rectWidth: width,
rectHeight: height,
// save the color of the rect
color:col
};
shapes.push(lastPos);
mousedown = false;
});
//Mousemove
$(canvas).on('mousemove', function(e) {
mousex = parseInt(e.clientX - canvasx);
mousey = parseInt(e.clientY - canvasy);
if (mousedown) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
width = mousex - last_mousex;
height = mousey - last_mousey;
col = $(".color").val();
if (shapes.length > 0) {
for (var i in shapes) {
// for every shape in the shapes array beginPath
ctx.beginPath();
//set the color of the stroke
ctx.strokeStyle = shapes[i].color;
//draw the rect
ctx.rect(shapes[i].lastMouseX, shapes[i].lastMouseY, shapes[i].rectWidth, shapes[i].rectHeight);
ctx.stroke();
}
}
//for the new rect beginPath
ctx.beginPath();
ctx.rect(last_mousex, last_mousey, width, height);
ctx.strokeStyle = col;
ctx.lineWidth = 10;
ctx.stroke();
}
/*
$("#canvas").mousedown(function(e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
handleMouseUp(e);
});*/
//Output
$('#output').html('current: ' + mousex + ', ' + mousey + '<br/>last: ' + last_mousex + ', ' + last_mousey + '<br/>mousedown: ' + mousedown);
});
});
.color {
border: 1px solid black;
font-family: 'Times New Roman', Times, serif;
font-size: 40px;
}
#canvas {
cursor: crosshair;
border: 1px solid #000000;
background-image: url("kroki2v3.png");
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
#output {
font-family: 'Times New Roman', Times, serif;
font-size: 40px;
}
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" maxlength="50" class="color" required />
<div id="container" style="display: none;"><img src="kroki2v3.png" id="img01" alt="" style="display: none;"></div>
<canvas id="canvas" width="3200" height="1400"></canvas>
<div id="output"></div>
</body>
</html>
Best changes to the code especially in the second change. Thank you for your response. I also want to know that how can I do this created rectangles draggable. Canvas usage restricts the draggable property. If I could create an id or a class for created rectangles, this would be easier.
You can't assign a class or an id to the rectangles however since the rectangles are saved in an array you can use the index number like
shapes[2]
It is possible drag the rectangles on the canvas, however this will happen - exactly like the drawing - during the mousedown, mousemove, mouseup events. You will need a way to change between drawing and dragging. But this would be a different question.