JSFiddle - React, Tailwind, and code Playground
Canvas editor
by Dave
HTML
<button onclick="new_can()">New</button><br>
<!---->
<div onclick="add_canvas_id(this); open_canvas()" style="display: inline-block">Canvas 1</div><br>
<!---->
<div onclick="add_canvas_id(this); open_canvas()" style="display: inline-block">Canvas 2</div><br>
<!---->
<div class="canvas_div">
<!---->
<canvas id="the_canvas" width="500" height="300"></canvas>
<!---->
<div style="display: inline-block;">
<!---->
<table id="can_tab" cellspacing="0" cellpadding="0"><tr>
<td id="can_txt" colspan="2">Text</td>
</tr><tr>
<td id="can_col" bgcolor="Blue"></td>
<td id="can_pen">1</td>
</tr><tr>
<td id="can_col" bgcolor="Red"></td>
<td id="can_pen">2</td>
</tr><tr>
<td id="can_col" bgcolor="Lime"></td>
<td id="can_pen">3</td>
</tr><tr>
<td id="can_col" bgcolor="Yellow"></td>
<td id="can_pen">4</td>
</tr><tr>
<td id="can_col" bgcolor="Black"></td>
<td id="can_pen">5</td>
</tr><tr>
<td id="can_col" bgcolor="Cyan"></td>
<td id="can_pen">6</td>
</tr><tr>
<td id="can_col" bgcolor="Green"></td>
<td id="can_pen">7</td>
</tr><tr>
<td id="can_col" bgcolor="Purple"></td>
<td id="can_pen">8</td>
</tr><tr>
<td id="can_col" bgcolor="Orange"></td>
<td id="can_pen">9</td>
</tr><tr>
<td id="can_col" bgcolor="Fuchsia"></td>
<td id="can_pen">10</td>
</tr><tr>
<td id="can_col" bgcolor="Gray"></td>
<td id="can_pen">15</td>
</tr><tr>
<td id="can_col" bgcolor="LightBlue"></td>
<td id="can_pen">20</td>
</tr><tr>
<td id="can_col" bgcolor="LightPink"> </td>
<td id="can_pen">30</td>
</tr>
</table>
</div>
<br>
<button id="pen" onclick="mode='pen'">Pen</button><button id="eraser" onclick="mode='eraser'">Eraser</button><button id="canvas_clr">Clear</button><button id="load" onclick="save()">OK</button>
</div>CSS
canvas {
border:2px solid #a0a0a0;
background: white;
cursor: default;
}
.canvas_div {
position: absolute;
display: none;
width: 545px;
height: 345px;
left : 50%;
top : 50%;
margin-left : -272.5px;
margin-top : -172.5px;
}
#can_tab {
border:2px solid #a0a0a0;
font-size: 12px;
color: #ff0000;
background: #ffffff;
text-align: center;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;/**/
}
#can_tab td {
border:1px solid #a0a0a0;
}JavaScript
function draw_canvas() {
//
the_canvas = document.getElementById('the_canvas');
ctx = the_canvas.getContext("2d");
can_col = "#000000";
can_pen = "1";
can_txt = "";
var lastX;
var lastY;
var mouseX;
var mouseY;
var canvasOffset = $(the_canvas).offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var isMouseDown = false;
//
//ctx.shadowBlur=2;
//ctx.shadowColor="black";
//
//ctx.font="30px Arial";
//ctx.fillStyle="blue";
//ctx.fillText("Hello World",20,40);
//
ctx.lineCap="round";
//
ctx.strokeStyle = can_col;
ctx.lineWidth = can_pen;
eraseSize = ctx.lineWidth;
//alert(eraseSize)
//
function canvas_mouse_down(e) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
//
//Mousedown stuff
//
lastX = mouseX;
lastY = mouseY;
isMouseDown = true;
}
//
function canvas_mouse_up(e) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
//
//Mouseup stuff
//
$("#can_tab #can_txt").unbind('click').bind('click', function(e) {
can_txt=1;
alert("Click on the canvas where you want the text to appear.");
});
//
if(can_txt === 1){
canvas_txt = prompt("Enter text","Canvas text");
//
if(canvas_txt != null){
ctx.font = "20px Arial";
ctx.fillStyle = can_col;
ctx.fillText(canvas_txt,mouseX,mouseY);
}
can_txt = ""
canvas_txt = ""
}
//
isMouseDown = false;
}
//
function canvas_mouse_out(e) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
//
//MouseOut stuff
//
isMouseDown = false;
}
//
function canvas_mouse_move(e) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
//
//Mousemove stuff
//
if (isMouseDown) {
ctx.beginPath();
if (mode == "pen") {
ctx.globalCompositeOperation = "source-over";
ctx.moveTo(lastX, lastY);
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
}
else {
ctx.globalCompositeOperation = "destination-out";
ctx.arc(lastX, lastY, eraseSize, 0, Math.PI * 2, false);
ctx.fill();
}
lastX = mouseX;
lastY =...