Pixelbox

Create 2D games in JavaScript, made easier · By Cedric Stoquer

Add to collection

Game Engine Community Devlog

Pixelbox community » Meta » Questions

Solving The canvas has been tainted by cross-origin data error

A topic by 7ports created May 03, 2020 Views: 686 Replies: 2

Viewing posts 1 to 2

7ports4 years ago (1 edit)

I've created a game and built it, but when I try to open index.html all I get is the following error message in the conosle:

in firefox

SecurityError: The operation is insecure. index.js:1

and on chrome

index.js:1 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

how do I make it such that this goes away? and how can I ensure that anyone that tries to play the game won't get this? I believe it has something to do with CORS but I'm not sure

Cedric Stoquer4 years ago

This is one of the annoying aspects of HTML5 development: you cannot open the html file directly. You need to use a server or you will get these CORS issues.

Fortunately, Pixelbox includes a local server so you can test the game in a web browser:

Click the button in the top-right corner to copy the URL into the clipboard, and paste it into the address bar of your web browser.

7ports4 years ago

right, makes sense. I was asking for distribution purposes, the testing has been good but I managed to figure out submission to itch and other such things so I’m good for now, thank you!

itch.io

Pixelbox

Solving The canvas has been tainted by cross-origin data error