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.
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.