CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Aeseir
Aeseir

Reputation: 8414

Drawing on a canvas element dynamically

I am trying to learn some new things and thought I experiment with canvas a bit. I got a canvas element that loads an image that i want to draw over once i click an anchor.

HTML

<a href="javascript:" id="testClick">Click Me</a>
<canvas id="test" width=400 height=400></canvas>

Javascript

var c = document.getElementById("test");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);  
};
img.src = 'http://lorempixel.com/400/400/abstract';

$("#test").on('click', function() {
    var c2 = document.getElementById('test').getContext('2d');
  c2.fillStyle = '#76ff03';
  c2.beginPath();
  c2.lineTo(100, 50);
  c2.lineTo(50, 100);
  c2.lineTo(0, 90);
  c2.closePath();
  c2.fill();
});

All its meant to do is draw a red triangle on top the image that is loaded previously by the canvas. Unfortunately i don't get anywhere with this.

Any help will be appreciated.

Upvotes: 2

Views: 519

Answers (1)

Lucas Aug
Lucas Aug

Reputation: 46

Apparently you are using the "$" function, which you are probably expecting from JQuery, but you are not including the JQuery script on your file.

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

Apart from that, your code seems to work properly.

By the way, the triangle you're drawing is actually green. If you want it to be red you could set

c2.fillStyle = '#ff0000';

Upvotes: 2

Related Questions