Question

159

Change color of canvas element

rated 0 times [ 160] [ 1] / answers: 1 / hits: 30762 / 13 Years ago, tue, april 26, 2011, 12:00:00

I am trying to change the color of line drawn on canvas dynamically...

ctx.moveTo(0, 0);

ctx.lineTo(0, 200);

ctx.strokeStyle = Grey

It could be mouseover event or press botton or mouse click event, I want to change the color of line or make it bold. Is it possible to change the color by adding event or is it possible to give style on an event on particular element?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jonrened

Add To Favorites

Follow

Total Points: 627

Total Questions: 114

Total Answers: 99

Location: Zimbabwe

Member since Thu, Jul 21, 2022

2 Years ago

jonrened questions

1 Jest Received: serializes to the same string

Mon, Nov 2, 20, 00:00, 4 Years ago

1 Keeping placeholder on react-select

Tue, May 19, 20, 00:00, 4 Years ago

1 How to show the first item by default in a dynamic Antd form?

Sat, May 16, 20, 00:00, 4 Years ago

1 querySelectorAll to include self

Tue, Jan 21, 20, 00:00, 4 Years ago

1 Compare two nested array and objects for find difference

Thu, Nov 7, 19, 00:00, 5 Years ago

View All

answered 13 Years ago montana · Accepted Answer

I was having the same problem, I did it by moving another line with another color of different canvas element, so it gives appearance of line changing its color dynamically.

function drawGreyLine() {

    ctx1.clearRect(0, 0, WIDTH, HEIGHT);

    ctx1.strokeStyle = Grey; // line color

    ctx1.moveTo(0, 0);

    ctx1.moveTo(0, 200);

    ctx1.lineTo(200, 200);

}



function drawColorLine() {

    x += dx;



    if (x <= 200) {

        ctx2.beginPath();

        ctx2.lineWidth = 5;

        ctx2.lineCap = round;

        ctx2.strokeStyle = sienna; // line color

        ctx2.moveTo(0, 200);

        ctx2.lineTo(x, 200);

        ctx2.moveTo(200, 200);

        ctx2.stroke();

    }

}

Hope this solves your problem.... :)