Search the Community

Showing results for tags 'getImageData'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 2 results

  1. Hi people, I'm porting something from flash where I have a drawn map with roads, and I want to be able to select each road individually with the mouse. now in Flash I could simply use the hittest on the shapes of the roads, but in PIXI I can't. My solution was to draw all the roads, each with an unique RGB color, and do a get pixel on your mousecoords to see which road you've selected. Now my problem is, how do i get pixeldata from my sprite when I'm using a webgl renderer ? What I've come up with so far is creating a separate canvasrenderer and a separate stage to render my map to, and from that canvas (renderer.view) get the 2d context and get pixeldata.. // create separate canvas and canvasRenderer for this pixel mapvar canvasStage = new PIXI.Stage(0x000000);var canvasRenderer = new PIXI.CanvasRenderer(1024, 598, null, true);// create a texture that holds the mapvar texture = new PIXI.RenderTexture(1024, 598, this.canvasRenderer);texture.render(map);// create a sprite on our separate stage, otherwise the texture won't be renderedvar textureSprite = new PIXI.Sprite(texture);canvasStage.addChild(textureSprite);// render the stagecanvasRenderer.render(canvasStage);after that is done, I can use this to get my pixels var pixelData = canvasRenderer.view.getContext(("2d")).getImageData(posX, posY, 1, 1).data;Is this the correct way to do it? or is there a better way? regards, Martijn
  2. Hi, i tried to figure out how the getImageData()-Function works. After several tutorials i wrote a script to enlarge the pictures pixels in a canvas. here's my code: var canvas = document.getElementById('canvas'); var cwidth = $("canvas").innerWidth();var cheight = $("canvas").innerHeight();if (canvas.getContext){ var ctx = canvas.getContext('2d');}var lvlImg = new Image();var lvlReady = false;lvlImg.onload = function(){ lvlReady = true; ctx.drawImage(lvlImg, lvl.x, lvl.y);}lvlImg.src = 'testbild.png';var lvl = { h: 16, w: 16, x: 0, y: 0};var pdata = new Array(); for(i=1;i<=lvl.h * lvl.w;i++){ pdata[i] = new Array(); pdata[i][0] = 0; pdata[i][1] = 0; pdata[i][2] = 0; pdata[i][3] = 0; }$(document).ready(function(){ var bd = ctx.getImageData(0, 0, 16, 16); for(i=0;i<lvl.h;i++){ for(l=0;l<lvl.w;l++){ var punktwert = (i*lvl.w) + l; var bdwert = punktwert * 4; pdata[punktwert][0] =[bdwert]; //R-Wert pdata[punktwert][1] =[bdwert + 1]; //G-Wert pdata[punktwert][2] =[bdwert + 2]; //B-Wert pdata[punktwert][3] =[bdwert + 3]; //A-Wert } } // For each pixel draw a rectangular shape filled with its color for(i=0;i<= lvl.h * lvl.w;i++){ var offsx = 20; var offsy = 20; var groessenfaktor = 3; ctx.beginPath(); var fss = "rgba(" + pdata[i][0] + "," + pdata[i][1] + "," + pdata[i][2] + "," + pdata[i][3] + ")"; ctx.fillStyle = fss; var actx = offsx + ((i%16) * groessenfaktor); var acty = offsy + (((i/16) - (i%16)) * groessenfaktor); ctx.moveTo(actx, acty); ctx.lineTo(actx + groessenfaktor, acty); ctx.lineTo(actx + groessenfaktor, acty + groessenfaktor); ctx.lineTo(actx, acty + groessenfaktor); ctx.lineTo(actx, acty); ctx.fill(); }});I tried to save the image-pixel-data in the variable "bd", but debugging with Firebug only returns: TypeError: can't convert undefined to objectpdata[punktwert][0] =[bdwert]; //R-Wert So is no array or it contains no data... Whats my fault in this case? Already now, thank you for your answers Greetings GamerXy1