Why does my element appear to be a different color than expected?

Question

Why does my element appear to be a different color than expected?

I've developed a sleek wind map (check out for reference).

Using a weighted interpolation every 10ms, I generate uVector and vVector data to calculate wind speed. Based on this speed, each point is assigned a specific color as outlined below.

if (weightWS < 13) {
    color = "#ffa500"
}
if (weightWS < 10) {
    color = "#CCCC00"
}
if (weightWS < 7) {
    color = "#008000"
}
if (weightWS < 4) {
    color = "#0000ff"
}
if (weightWS < 1) {
    color = "#800080"
}

The assigned colors are then passed to the animate function stored in drawData[3].

function animate(){
    ctx.beginPath(); 
    ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.closePath();
    
    for(var pointCount=0;pointCount<pointNum;pointCount++){
        let xMid,yMid;
        let xPoint = points[pointCount][0];
        let yPoint = points[pointCount][1];

        if(xPoint < 141 || xPoint >580 || yPoint < 120 || yPoint > 524){
            xPoint = getRandomIntInclusive(141,580);
            yPoint = getRandomIntInclusive(120,524);
            points.push([xPoint,yPoint]);
        }

        var drawData = weightAllData(xPoint,yPoint);
        colorArr[pointCount] = drawData[3]; 
        
        ctx.moveTo(xPoint, yPoint);
        ctx.lineTo(xPoint+drawData[1],yPoint+drawData[2]);
        ctx.strokeStyle = drawData[3]; 

        ctx.stroke(); 
        points[pointCount][0] = xPoint+drawData[1];
        points[pointCount][1] = yPoint+drawData[2];
    }
}

Despite console feedback displaying various colors, mainly "#800080" and "#0000ff", all points seem to be affected by the same color. Even those with speed above 1 end up purple ("#800080").

The intention is for each individual pixel to have its own color, which should include some blue ("#0000ff") ones. However, any blue points that show up affect all pixels simultaneously, contrary to the desired outcome.

This issue persists regardless of the animation speed setting (e.g. 10ms, 1000ms, 10000ms). Any insights or solutions would be greatly appreciated!

Thank you deeply for your assistance and dedication.

javascript html colors html5-canvas line

Answer 1

Answer №1

The issue arises from adding path segments to the same path within a for loop.

Consider the code snippet below which includes two loops. The first loop adds 100 path segments to one path, resulting in all lines being redrawn each time `stroke()` is called. Additionally, all path segments are drawn in the last color used, making it very inefficient as the top loop ends up drawing 5050 line segments; the 1st pass draws 1 line, the 2nd pass draws 2 more, and so on.

In contrast, the second loop starts a new path inside the loop where each path segment receives a different color, resulting in only 100 line segments being drawn.

const ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
const colors = ["Green", "Blue", "Red", "Black", "Yellow"];

ctx.beginPath();              // start a new path
for (let i = 0; i < 100; i ++) {
    ctx.strokeStyle = colors[i % colors.length];
    ctx.moveTo(i * 5, 0);    // adds to existing path
    ctx.lineTo(i * 5, 40);
    ctx.stroke();            // draw all path segments since last beginPath
}


for (let i = 0; i < 100; i ++) {
    ctx.strokeStyle = colors[i % colors.length];
    ctx.beginPath();         // start a new path
    ctx.moveTo(i * 5, 60);   // adds to the path
    ctx.lineTo(i * 5, 100);
    ctx.stroke();            // draw the path
}

canvas {boarder: 2px solid #000}

<canvas id="canvas" width="500" height="100></canvas>

It is important to note that whenever you change the style, line width, etc., starting a new path is necessary.

Answer 2

The issue arises from adding path segments to the same path within a for loop.

Consider the code snippet below which includes two loops. The first loop adds 100 path segments to one path, resulting in all lines being redrawn each time `stroke()` is called. Additionally, all path segments are drawn in the last color used, making it very inefficient as the top loop ends up drawing 5050 line segments; the 1st pass draws 1 line, the 2nd pass draws 2 more, and so on.

In contrast, the second loop starts a new path inside the loop where each path segment receives a different color, resulting in only 100 line segments being drawn.

const ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
const colors = ["Green", "Blue", "Red", "Black", "Yellow"];

ctx.beginPath();              // start a new path
for (let i = 0; i < 100; i ++) {
    ctx.strokeStyle = colors[i % colors.length];
    ctx.moveTo(i * 5, 0);    // adds to existing path
    ctx.lineTo(i * 5, 40);
    ctx.stroke();            // draw all path segments since last beginPath
}


for (let i = 0; i < 100; i ++) {
    ctx.strokeStyle = colors[i % colors.length];
    ctx.beginPath();         // start a new path
    ctx.moveTo(i * 5, 60);   // adds to the path
    ctx.lineTo(i * 5, 100);
    ctx.stroke();            // draw the path
}

canvas {boarder: 2px solid #000}

<canvas id="canvas" width="500" height="100></canvas>

It is important to note that whenever you change the style, line width, etc., starting a new path is necessary.

Answer 3

Answer №2

To make the code more efficient, it would be better to use else ifs instead of if statements and replace them with ranges as variables. Here's a revised version of your code:

if (weightWS <= 13 && weightWS > 10) {
            color = "#ffa500"
        }
        else if (weightWS <= 10 && weightWS > 7) {
            color = "#CCCC00"
        }
        else if (weightWS <= 7 && weightWS > 4) {
            color = "#008000"
        }
        else if (weightWS <= 4 && weightWS > 1) {
            color = "#0000ff"
        }
        else if (weightWS <= 1 && weightWS > 0) {
            color = "#800080"
        }
        else {
            color = "#000000")
        }

If this solution works effectively, consider defining variables such as purple = [0, 1]

Answer 4

To make the code more efficient, it would be better to use else ifs instead of if statements and replace them with ranges as variables. Here's a revised version of your code:

if (weightWS <= 13 && weightWS > 10) {
            color = "#ffa500"
        }
        else if (weightWS <= 10 && weightWS > 7) {
            color = "#CCCC00"
        }
        else if (weightWS <= 7 && weightWS > 4) {
            color = "#008000"
        }
        else if (weightWS <= 4 && weightWS > 1) {
            color = "#0000ff"
        }
        else if (weightWS <= 1 && weightWS > 0) {
            color = "#800080"
        }
        else {
            color = "#000000")
        }

If this solution works effectively, consider defining variables such as purple = [0, 1]

Why does my element appear to be a different color than expected?

Answer №1

Answer №2

Similar questions

I am seeking to retrieve data from MongoDB by utilizing the limit feature, while also sending a specific query

Ways to retrieve every element inside a specific div container

Encountering a "SyntaxError: Unexpected token '/' in... index.ejs while compiling ejs" issue following the recent npm package updates

Issues with Contenteditable functionality in JavaScript

Is it possible for AJAX JSON response to return both accurate and undefined values sporadically?

What are some ways to monitor the movement of elements and activate functions at precise locations?

Is there a way to eliminate the transform style from a draggable element?

Working with jQuery: Creating multiple lightboxes using the same jQuery code

React SVG not displaying on page

Looking to create a clone of an HTML element, make some modifications, and extract the HTML string without impacting the DOM?

The call signatures for `node-fetch -- typeof import("[...]/node-fetch/index")'` are not properly defined

AngularJS allows you to toggle the visibility of a div at set intervals, creating

Transferring a Query between Domains with the Help of JavaScript

Unable to find '/images/img-2.jpg' in the directory 'E:React eact-demosrc'

What is the best way to utilize an array that has been generated using a function?

A novel RxJS5 operator, resembling `.combineLatest`, yet triggers whenever an individual observable emits

Adjust the width of a div in Angular 6 based on a specified condition

The combination of jQuery, using .load method in javascript to prevent scrolling up, making XMLHttpRequest requests, updating .innerHTML elements, and troubleshooting CSS/JS

Display a confirmation modal before triggering $routeChangeStart in AngularJs, similar to the window.onbeforeunload event

Validating properties of a class using Typescript's Class-Validator