execute canvas dynamically with a button

Question

execute canvas dynamically with a button

Navigation

#1 by (1 votes)

0

I am creating canvas dynamically with input, for this example I put 2 canvas with the same id. What I am trying to do is that when I draw the canvas with the button, the drawing will be generated. in the same way if by pressing the second button that enters and generates the same drawing.

Code:

$(document).ready(function (){
var a_canvas = document.getElementById("a");
var context = a_canvas.getContext("2d");

$('#draw').click(function() {
// Draw the face
context.fillStyle = "yellow";
context.beginPath();
context.arc(95, 85, 40, 0, 2*Math.PI);
context.closePath();
context.fill();
context.lineWidth = 2;
context.stroke();
context.fillStyle = "black";

// Draw the left eye
context.beginPath();
context.arc(75, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();

// Draw the right eye
context.beginPath();
context.arc(114, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();

// Draw the mouth
context.beginPath();
context.arc(95, 90, 26, Math.PI, 2*Math.PI, true);
context.closePath();
context.fill();

// Write "Hello, World!"
context.font = "30px Garamond";
context.fillText("Hello, World!",15,175);
});
});

canvas {
    border: 1px dotted black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas class="u" id="a" width="200" height="200"></canvas>
<div>
<button id="draw">Draw</button>
      </div>
      
<canvas id="a" width="200" height="200"></canvas>
<div>
<button id="draw">Draw</button>
</div>

one of the way I'm trying to do is that in var a_canvas = document.getElementById("a"); or for the class

javascript jquery

asked by Eduard 22.03.2017 в 17:09

source

1 answer

NSPredicate simulate an SQL "Select count (distinct columnName)" of an array Error when implementing a TAD Point in C ++

score 1 · Accepted Answer

You can not use the same ID twice and wait for javascript or jQuery to guess which is which.

In the following example I implemented what you propose using classes. Now, both buttons have the same class draw , but also have the attribute rel that allows them to know which canvas they should aim for.

$(document).ready(function (){


$('.draw').click(function() {

var a_canvas =document.getElementById( jQuery(this).attr('rel'));
var context = a_canvas.getContext("2d");

// Draw the face
context.fillStyle = "yellow";
context.beginPath();
context.arc(95, 85, 40, 0, 2*Math.PI);
context.closePath();
context.fill();
context.lineWidth = 2;
context.stroke();
context.fillStyle = "black";

// Draw the left eye
context.beginPath();
context.arc(75, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();

// Draw the right eye
context.beginPath();
context.arc(114, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();

// Draw the mouth
context.beginPath();
context.arc(95, 90, 26, Math.PI, 2*Math.PI, true);
context.closePath();
context.fill();

// Write "Hello, World!"
context.font = "30px Garamond";
context.fillText("Hello, World!",15,175);
});
});

canvas {
    border: 1px dotted black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="float:left;">
  <canvas class="u" id="canvas1" width="200" height="200"></canvas><br>
  <button class="draw" rel="canvas1">Draw</button>
</div>
      

<div style="float:left;">
<canvas id="canvas2" width="200" height="200"></canvas><br>
<button class="draw" rel="canvas2">Draw</button>
</div>

There are other ways to do this, even without helping with the rel attribute. For example, you could make the button point to the first child canvas of your parent element, but the detail of the implementation is beyond the scope of this response.