html5 canvas turns blank

Report · May 20, 2023

hello, i am absolutely new to coding in actionscript and i've made something.

when i export it from the adobe animate, it runs perfectly fine, but when i open it from my computer folder, everything is just blank. what do i do?? please tell me if i need to be more specific.

Report · May 20, 2023

your local browser is probably complaining about a security violation. (open your developer console* to confirm.)

you should be able to upload to a file server and test that.

*

Lesson 1: https://youtu.be/bG05_am-fQI

Lesson 2: https://youtu.be/H9e9toftvdM

Report · May 20, 2023

i dont think any of these are the problems. when i checked on the images folder, only 4-6 out of the many i made was in there, would you like to check out the problem and help ? D:

Report · May 20, 2023

copy and paste here the contents of your developer console

Report · May 20, 2023

<!DOCTYPE html>

<!--

NOTES:

1. All tokens are represented by '$' sign in the template.

2. You can write your code only wherever mentioned.

3. All occurrences of existing tokens will be replaced by their appropriate values.

4. Blank lines will be removed automatically.

5. Remove unnecessary comments before creating your template.

-->

<html>

<head>

<title>coolkidseven</title>

<style>

#animation_container, #_preload_div_ {

position:absolute;

margin:auto;

left:0;right:0;

top:0;bottom:0;

}

</style>

var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;

function init() {

canvas = document.getElementById("canvas");

anim_container = document.getElementById("animation_container");

dom_overlay_container = document.getElementById("dom_overlay_container");

var comp=AdobeAn.getComposition("B1EE98EF2682264F8B985D83CD111F31");

var lib=comp.getLibrary();

var loader = new createjs.LoadQueue(false);

loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});

loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});

var lib=comp.getLibrary();

loader.loadManifest(lib.properties.manifest);

}

function handleFileLoad(evt, comp) {

var images=comp.getImages();

if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }

}

function handleComplete(evt,comp) {

//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.

var lib=comp.getLibrary();

var ss=comp.getSpriteSheet();

var queue = evt.target;

var ssMetadata = lib.ssMetadata;

for(i=0; i<ssMetadata.length; i++) {

ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )

}

var preloaderDiv = document.getElementById("_preload_div_");

preloaderDiv.style.display = 'none';

canvas.style.display = 'block';

exportRoot = new lib.coolkidsev();

stage = new lib.Stage(canvas);

stage.enableMouseOver();

//Registers the "tick" event listener.

fnStartAnimation = function() {

stage.addChild(exportRoot);

createjs.Ticker.framerate = lib.properties.fps;

createjs.Ticker.addEventListener("tick", stage);

}

//Code to support hidpi screens and responsive scaling.

AdobeAn.makeResponsive(true,'both',true,1,[canvas,preloaderDiv,anim_container,dom_overlay_container]);

AdobeAn.compositionLoaded(lib.properties.id);

fnStartAnimation();

}

</script>

</head>

</div>

</body>

</html>
Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: <URL>
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:13 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._testHit @ createjs.min.js:13
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15
createjs.min.js:15 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
b._applyFilters @ createjs.min.js:15

Report · May 20, 2023

that's the security issue already mentioned in my first post.

Report · May 20, 2023

still not working . do you want the fla file?

Report · May 20, 2023

did you upload to a server to test?

Report · May 20, 2023

just got it working right now....??? all i had to do was delete the preloader for some reason, thanks for taking your time though 😄

Report · May 20, 2023

you're welcome.

for others, the only thing causing the op's cross-domain security issue was the preloader

Report · May 20, 2023

also, the only thing thats showing up is the preloader .

html5 canvas turns blank

Photos