0

I have been fiddling with this bit of code for hrs now and going round in circles and would like to ask for some pointers please.

The code below lets me place as many red dots as possible on a canvas with a bgd image, now what I am looking to do is have this layout but have links at the top of the canvas like so:

Link1->Green Dot Link2->Yellow Dot

And obviously when I click on each it will allow me to place yellow/green dots on the canvas alongside the red dots.

I am currently using html2canvas.js

Thanks again

    $("#canvas").click(function(e){
     getPosition(e); 
});
var pointSize = 7;
function getPosition(event){
     var rect = canvas.getBoundingClientRect();
     var x = event.clientX - rect.left;
     var y = event.clientY - rect.top;

     drawCoordinates(x,y);
}
function drawCoordinates(x,y){  
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.fillStyle = "#ff2626"; // Red color
    ctx.beginPath();
    ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
    ctx.fill();
}
AndrewL64
  • 15,794
  • 8
  • 47
  • 79
Isitabird
  • 71
  • 9
  • I would set it up by having buttons that set a color var in your script, then pass that color into your drawCoordinates function for your fillStyle. – Tim Hunter Nov 30 '18 at 21:23

1 Answers1

1

Just add the buttons (or links) to your HTML like this:

<button id="red">
    Red Dot
</button>
<button id="green">
    Green Dot
</button>
<button id="yellow">
    Yellow Dot
</button>

Then add the following to your JavaScript:

var defaultColor ="#ff2626"; // default color 'red' on page load

var a = document.getElementById('green');
var b = document.getElementById('yellow');
var c = document.getElementById('red');

a.addEventListener('click', greenDot);
b.addEventListener('click', yellowDot);
c.addEventListener('click', redDot);

function greenDot(){
    defaultColor = '#116311';
}
function yellowDot(){
    defaultColor = '#d3de24';
}
function redDot(){
    defaultColor = '#ff2626';
}

And then finally change ctx.fillStyle in drawCoordinates function from:

ctx.fillStyle = "#ff2626";

to:

ctx.fillStyle = defaultColor;

Here is a jsFiddle with the above code: https://jsfiddle.net/AndrewL64/mob5r6cs/1/

AndrewL64
  • 15,794
  • 8
  • 47
  • 79