When the getImageData event is triggered upon loading

Question

When the getImageData event is triggered upon loading

Hello, I have a script that identifies transparent and non-transparent pixels. Currently, the result is displayed from a 100px by 100px rectangle on mouseover:

var data = ctx.getImageData(100,100, canvas.width, canvas.height).data;

During mouseover, it shows results for both opaque and transparent areas.

I want to visualize this rectangle upon loading with a grid overlaying the image. Opaque areas will be green and transparent areas red. Do I need an onload function for this? How should it be implemented?

I am currently stuck and seeking guidance in the right direction.

Check out my progress here:

https://jsfiddle.net/kdichev/Lnp3k5re/

javascript html css oop ecmascript-5

Answer 1

Answer №1

To ensure the game console remains visible, consider drawing your 100x100 boxes with a reduced alpha (globalAlpha).

Check out this example code and demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var boxWidth=100;
var boxHeight=100;
var boxRows=Math.ceil(865/boxHeight);
var boxCols=Math.ceil(1152/boxWidth);
var boxes=new Array(boxRows*boxCols);
for(var i=0;i<boxes.length;i++){boxes[i]=false;}

var img=new Image();
img.onload=start;
img.crossOrigin='anonymous';
img.src="http://i.imgur.com/RrHayx8.png?1";
function start(){

  ctx.drawImage(img,0,0);

  var d=ctx.getImageData(0,0,cw,ch).data;

  for(var i=0;i<d.length;i+=4){
    if(d[i+3]>200){
      var px=parseInt(i/4);
      var pixelY=parseInt(px/cw);
      var pixelX=px-pixelY*cw;
      var boxX=parseInt(pixelX/boxWidth);
      var boxY=parseInt(pixelY/boxHeight); 
      boxes[boxY*boxCols+boxX]=true;
    }
  }

  ctx.globalAlpha=0.25;
  ctx.fillStyle='red';

  for(var i=0;i<boxes.length;i++){
    var y=parseInt(i/boxCols);
    var x=i-y*boxCols;
    if(boxes[i]==true){
      ctx.fillRect(x*boxWidth,y*boxHeight,boxWidth,boxHeight);        
    }
  }

  ctx.globalAlpha=1.00;
  ctx.fillStyle='black';

}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=1152 height=865></canvas>

Answer 2

To ensure the game console remains visible, consider drawing your 100x100 boxes with a reduced alpha (globalAlpha).

Check out this example code and demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var boxWidth=100;
var boxHeight=100;
var boxRows=Math.ceil(865/boxHeight);
var boxCols=Math.ceil(1152/boxWidth);
var boxes=new Array(boxRows*boxCols);
for(var i=0;i<boxes.length;i++){boxes[i]=false;}

var img=new Image();
img.onload=start;
img.crossOrigin='anonymous';
img.src="http://i.imgur.com/RrHayx8.png?1";
function start(){

  ctx.drawImage(img,0,0);

  var d=ctx.getImageData(0,0,cw,ch).data;

  for(var i=0;i<d.length;i+=4){
    if(d[i+3]>200){
      var px=parseInt(i/4);
      var pixelY=parseInt(px/cw);
      var pixelX=px-pixelY*cw;
      var boxX=parseInt(pixelX/boxWidth);
      var boxY=parseInt(pixelY/boxHeight); 
      boxes[boxY*boxCols+boxX]=true;
    }
  }

  ctx.globalAlpha=0.25;
  ctx.fillStyle='red';

  for(var i=0;i<boxes.length;i++){
    var y=parseInt(i/boxCols);
    var x=i-y*boxCols;
    if(boxes[i]==true){
      ctx.fillRect(x*boxWidth,y*boxHeight,boxWidth,boxHeight);        
    }
  }

  ctx.globalAlpha=1.00;
  ctx.fillStyle='black';

}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=1152 height=865></canvas>

When the getImageData event is triggered upon loading

Answer №1

Similar questions

Continue running the remaining part of the function once the asynchronous function has completed its execution

Ways to update a component when the state changes

Encountered an error when attempting to submit with Node.js and Express.js connected to MySql - "Cannot POST /login

Generating a JavaScript bundle using the npm TypeScript compiler

Navigation isn't aligning correctly on the right side

What steps are involved in using a Python method to create a brand new class object?

What is the best way to control the amount of rows displayed in my gallery at any given time?

Accessing Struts2 tag attributes with JavaScript

What causes variations in versions displayed by Node.js?

Creating an XPATH Selector with SCRAPY

The ng-repeat directive adds an additional line after each iteration of the list item

Customize the URL path in Next.JS according to the user's location

Design a dynamic advertisement page using HTML and Bootstrap to ensure responsiveness

Use jQuery and AJAX to update the current HTML content only when the image has finished loading

Javascript encountered an error upon attempting to return from the main function

Start up Angular with a Fire $http.get when the page loads

Modifying an object's value before pushing it into an array in JavaScript

What is the best way to implement colorful opening hours in code?

The fluid table within the Bootstrap container is not adapting to different screen

Troubleshooting: WordPress failing to launch Bootstrap Modal