John Davidson

javascript - how to make drawable on dynamic canvas


I have display canvas dynamically based on records in db. Currently I have
two records in db and it shows two canvas in page.Now i should able to draw
on both cannvas however I can only draw on last canvas not on the both canvas.
Please check the image for more.
I am getting id 609 and 610.It can be 1,2 etc. This id are passed on canvas id to make it unique.

<div class="snap-field col-sm-12" style="height: 450px;"> 

loop here
<canvas data-fieldid="{{$draw->id}}"
width="400" height="200"


This is my js part and within document.ready function i have loaded the canvas . initEditableImageCanvas takes unique id. for example in this case it takes 609 and 610.I can draw on canvas with id 610 but not on 609.Maybe I need to make some changes here and I am not sure what should I do

var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;

var x = "red",
y = 2;

function initEditableImageCanvas(fieldId) {

canvas = document.getElementById('image-canvas-' + fieldId);
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;

canvas.addEventListener("mousemove", function(e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function(e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function(e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function(e) {
findxy('out', e)
}, false);


function draw() {

ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;

function findxy(res, e) {

if (res == 'down') {

prevX = currX;
prevY = currY;
currX = e.clientX - canvas.getBoundingClientRect().left;
currY = e.clientY - canvas.getBoundingClientRect().top;

flag = true;
dot_flag = true;
if (dot_flag) {
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
dot_flag = false;
if (res == 'up' || res == "out") {
flag = false;
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.getBoundingClientRect().left;
currY = e.clientY - canvas.getBoundingClientRect().top;


$(document).ready(function() {
$(".image-canvas").each(function(canvas) {
//get id

I am looking for help to fix it. I want draw in all canvas.
Any help? Thanks

My Answer:
You can achieve this by creating a separate canvas element for each record in the database and then attaching a drawing functionality to each canvas element. Here's an example code snippet to demonstrate this:


Dynamic Canvas Drawing

In this code snippet, we first create canvas elements dynamically based on the records in the database. We attach event listeners for mouse events (mousedown, mousemove, mouseup) to each canvas element to enable drawing functionality. This way, you can draw on both canvas elements independently.

Rate this post

3 of 5 based on 3062 votes


© 2024 - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us