How to change Stroke color once the box is filled with current color

Question

I have this design description to create:

Step 1: Default state is type on white background.

Step 2: Cursor tracks and you draw.

Step 3: If you fill the whole screen red, then cursor draw changes to white colour.

Step 4: You draw in white.

Step 5: If you fill the full screen with the drawing, you're back to step 1 with a full white background.

I have completed the task till Step 2 but unable to change color once entire screen is filled with red color.

So in short, Once the users fills the box with red color, I want to change the color to white. And in same way once the box is filled with white color I want to change it back to red.

Please check the codepen for code - https://codepen.io/chiragjain94/pen/dyOzqGy







window.onload = function() {
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

// Fill Window Width and Height
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;

// Set Background Color
ctx.fillStyle="#fff";
ctx.fillRect(0,0,myCanvas.width,myCanvas.height);

// Mouse Event Handlers
if(myCanvas){
    var isDown = false;
    var canvasX, canvasY;
    ctx.lineWidth = 5;
    
    $(myCanvas)
    .mousedown(function(e){
        isDown = true;
        ctx.beginPath();
        canvasX = e.pageX - myCanvas.offsetLeft;
        canvasY = e.pageY - myCanvas.offsetTop;
        ctx.moveTo(canvasX, canvasY);
    })
    .mousemove(function(e){
        if(isDown !== false) {
            canvasX = e.pageX - myCanvas.offsetLeft;
            canvasY = e.pageY - myCanvas.offsetTop;
            ctx.lineTo(canvasX, canvasY);
            ctx.strokeStyle = "#000";
            ctx.stroke();
        }
    })
    .mouseup(function(e){
        isDown = false;
        ctx.closePath();
    });
}

// Touch Events Handlers
draw = {
    started: false,
    start: function(evt) {

        ctx.beginPath();
        ctx.moveTo(
            evt.touches[0].pageX,
            evt.touches[0].pageY
        );

        this.started = true;

    },
    move: function(evt) {

        if (this.started) {
            ctx.lineTo(
                evt.touches[0].pageX,
                evt.touches[0].pageY
            );

            ctx.strokeStyle = "#000";
            ctx.lineWidth = 5;
            ctx.stroke();
        }

    },
    end: function(evt) {
        this.started = false;
    }
};

// Touch Events
myCanvas.addEventListener('touchstart', draw.start, false);
myCanvas.addEventListener('touchend', draw.end, false);
myCanvas.addEventListener('touchmove', draw.move, false);

// Disable Page Move
document.body.addEventListener('touchmove',function(evt){
    evt.preventDefault();
},false);
};

Please provide your valuable suggestion as I have a very high priority deadline to meet by Sunday EOD.

user_8422555 · Answer

You need verify each pixel value and compare to red color or white color (RGB value).

Use the ctx.getImageData to get array of color. This array have a length = width * height * 4 size, cause it save 4 information: r, g, b and a. So turn a loop with i+4 interation. In interation you can work with i, i+1 and i+2 to get r, g and b.

Red is R=255, G=0, B=0 White is R=255, G=255, GB=255


    r = arrData.data[y];
    g = arrData.data[y + 1]
    b =arrData.data[y + 2]
    
    
    if( x == "red"){ 
    
    if(( r != 255) || ( g != 0) || (b!=0) ) {
    console.log( r, g, b)
    return;
    }
    
    }else{
    
    if(( r != 255) || ( g != 255) || (b!=255) )       {
    console.log( r, g, b)
    return;
    }
    
    }

Look this: https://codepen.io/Luis4raujo/full/rNWzPzO

If this answer help you check as correct or voteup!

How to change Stroke color once the box is filled with current color

1 Answers