CODEWITHSUNDEEP
javascripteaseljscreatejs
aakash an
aakash an

Reputation: 3

Showing uncaught type error in CreateJS. Not showing any output..my code is given below

its showing some error in createjs file.

<html>
<head>
<title></title>
<script src="https://code.createjs.com/createjs-2014.12.12.min.js">
</script>       <script>
var preload,cW,cH,winW,winH;
var road,city1,city2,sky,build1,build2;
window.onload = function(){
    var canvas = document.getElementById("demoCanvas");
   var stage = new  createjs.Stage(canvas);
cW=1200;
cH=600;
    preload = new createjs.LoadQueue(true);

    var manifest =[{id:"ad_road",src:"road.png"},
        {id:"ad_build1",src:"build.png"},
        {id:"ad_build2",src:"build.png"},
        {id:"ad_farbuild1",src:"layer3.png"},
        {id:"ad_land",src:"land1.png"},
        {id:"ad_farbuild2",src:"layer1.jpg"},
        {id:"ad_sky",src:"sky.png"}
    ];
    preload.loadManifest(manifest);
    preload.on("complete",handleComplete);


function handleComplete(){
    sky = new createjs.Shape();
    sky.graphics.beginBitmapFill(preload.getResult("ad_sky"),"repeat-x").drawRect(0, 0, 1200,600);

    var roadImg = preload.getResult("road");
    road = new createjs.Shape();
    road.graphics.beginBitmapFill(roadImg).drawRect(0, 0, cW + roadImg.width, roadImg.height*1);
    road.tileW = roadImg.width;
    road.y = cH - roadImg.height;

    /*var matrix = new createjs.Matrix2D(1,2,3,4,5,6);*/

    build1 = new createjs.Bitmap(preload.getResult("ad_build1"));
    build1.setTransform(Math.random()*cW ,cH - build1.image.height * 0.7 - roadImg.height, 0.7,0.7);
    build1.alpha = 1;

    build2 = new createjs.Bitmap(preload.getResult("ad_build2"));
    //console.log(cH - build2.image.height * 1 - roadImg.height);
    build2.setTransform(Math.random()*cW ,cH - build2.image.height * 0.7 - roadImg.height, 0.7,0.7);
    build2.alpha = 1;

    stage.addChild(sky,build1,build2,road);
    createjs.Ticker.timingMode = createjs.Ticker.RAF;
    document.onkeydown = tick;
}
    //createjs.Ticker.addEventListener("tick", tick);


function tick(event){
    if(event.keyCode === 37){
        var deltaS = event.delta / 1000 || 40/1000;
        road.x = (road.x - deltaS * 200) % road.tileW;

        build1.x = (build1.x - deltaS * 60);
        if (build1.x + build1.image.width * build1.scaleX <= 0) {
            build1.x = cW;
        }
        build2.x = (build2.x - deltaS * 75);
        if (build2.x + build2.image.width * build2.scaleX <= 0) {
            build2.x = cW;
        }
        stage.update(event);
    }
    }
    }
</script>
</head>
<body>
<p><canvas height="600" id="demoCanvas" width="1300"> </canvas></p>
</body>
</html>

its showing the following error console-log:Uncaught TypeError: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': No function was found that matched the signature provided.

Upvotes: 0

Views: 237

Answers (1)

gskinner
gskinner

Reputation: 2488

As Lanny stated in the comments, this error occurs when you pass an invalid image (empty, not fully loaded, corrupt, 404, etc) into beginBitmapFill.

Confirm that your image is loading properly.

I just pushed an update to EaselJS NEXT that bypasses this RTE, and ignores invalid bitmap fills.

Upvotes: 1

Related Questions