I am building a drawing tool with the canvas function and am trying to allow the user to change the colour of the line they are using. I followed a video tut but i think JS might of updated since it was made.
If you could help me out for my uni project that would be incredible ! Thank You!!!
const canvas = document.getElementById("canvas")
canvas.width = window.innerWidth - 60;
canvas.height = 400;
let context = canvas.getContext("2d");
context.fillStyle = "white";
context.fillRect(0,0, canvas.width, canvas.height);
let draw_color = "black";
let draw_width = "2";
let is_drawing = false;
function change_color() {
draw_color = element.style.background;
}
// Allows for the pen to go up and down without constantly drawing //
canvas.addEventListener("touchstart", start, false);
canvas.addEventListener("touchmove", draw, false);
canvas.addEventListener("mousedown", start, false);
canvas.addEventListener("mousemove", draw, false);
canvas.addEventListener("touchend", stop, false);
canvas.addEventListener("mouseup", stop, false);
canvas.addEventListener("mouseout", stop, false);
// Functions that allow the drawing to actually happen //
function start(event){
is_drawing = true;
context.beginPath();
context.moveTo(event.clientX - canvas.offsetLeft,
event.clientY - canvas.offsetTop);
event.preventDefault();
}
function draw(event) {
if (is_drawing) {
context.lineTo(event.clientX - canvas.offsetLeft,
event.clientY - canvas.offsetTop)
context.strokestyle = draw_color;
context.linewidth = draw_width;
context.lineCap = "round";
context.lineJoin = "round";
context.stroke();
}
event.preventDefault();
}
// Functions that allow the drawing to actually stop //
function stop(event) {
if (is_drawing) {
context.stroke();
context.closePath();
is_drawing = false;
}
event.preventDefault();
}
You should've written 'strokeStyle' and 'lineWidth' instead of 'strokestyle' and 'linewidth'. It's called camel case.