CODEWITHSUNDEEP
javascripthtmlcanvas
ZoEM
ZoEM

Reputation: 852

Merging javascript code with canvas animation

I’m trying to ‘merge’ some javascript code that changes pictures with a canvas that has also animation to it, without them cancelling eachother out. In this canvas there are some clouds that move and I want to throw kittens into it.

I understand this this might be a basic HTML5 canvas question but I’m terrible using canvas though. This is the first time I’m really working with it. Whenever I try to implement the code that applies to the kittens, the canvas screen just goes white and nothing shows.

I want to stick with most of the code that I have. I really want to keep the canvas the way it is and change nothing there but add those kittens in there too. Can someone puzzle out for me how to appropiately do this?

I'm guessing I would need to tweak the animation function somehow?

function animate(){
        ctx.save();
        ctx.clearRect(0, 0, cW, cH);        
        background.render(); 
        foreground.render(); 
        ctx.restore();
    }
    var animateInterval = setInterval(animate, 30);
}

The code is all in a FIDDLE, because it’s too much to show it on here.

EDIT: To be clear, I'm asking for the pictures of the kittens to be laid over the canvas, but I want the clouds in the canvas to overlay the kittens.

Upvotes: 2

Views: 348

Answers (1)

Snsa90
Snsa90

Reputation: 151

What you need to know is that the canvas element is transparent by default. So notice the minor change I made here :

body{ 
background:#667; 
}

canvas {
	width:50vw;
	height:50vh;
	margin-left: 20%;
}

#image {
border:#000 1px solid; 
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 33%;
height: 100%;
position: relative;
top:140px;
z-index: -1;
}

#my_canvas{ 
border:#000 1px solid; 
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 33%;
height: 100%;
}
<link href="css.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="" id="image"/>
<script>

var bg = new Image();
bg.src = "http://proverum.ru/templates/oblaka/img/cloud.png";
var fg = new Image();
fg.src = "http://www.tourisme-fumel.com/img_interf/meteo/cloudy.png";

function initCanvas(){
var lastTick = 0;
var position = { x:0, y:0 };
var rain = document.getElementById('rain');
var ctx = document.getElementById('my_canvas').getContext('2d');
var canvas_container = document.getElementById('my_canvas2');
var cW = ctx.canvas.width, cH = ctx.canvas.height;
	
	function Background(){
        this.x = 0, this.y = 0, this.w = bg.width, this.h = bg.height;
        this.render = function(){
		
            ctx.drawImage(bg, this.x--, 0);
            if(this.x <= -250){
                this.x = 0;
            }
        }
    }
    var background = new Background();

var image1 = "http://www.catsofaustralia.com/images/three_kittens.jpg";
var image2 = "http://thecatpalace.com.au/wp-content/uploads/2015/05/kitten1.jpg";
var image3 = "http://www.keepingkittens.com/images/cute-little-kitten-minka-rose-the-real-cinderella-story-21652512.jpg";

$(function() {
  $("#image").prop("src", image1);
  setInterval(function() {
$("#image").prop("src", image2);
setTimeout(function() {
  $("#image").prop("src", image2);
  setTimeout(function() {
    $("#image").prop("src", image3);
  }, 50);
  setTimeout(function() {
    $("#image").prop("src", image1);
  }, 500);
}, 10);
  }, 5000);
});
	
	function Foreground(){
        this.x = 0, this.y = 0, this.w = fg.width, this.h = fg.height;
        this.render = function(){
		
            ctx.drawImage(fg, this.x--, 0);
            if(this.x <= -499){
                this.x = 0;
            }
        }
    }
    var foreground = new Foreground();
	
	
	function animate(){
		ctx.save();
		ctx.clearRect(0, 0, cW, cH);		
		background.render(); 
		foreground.render(); 
		ctx.restore();
	}
	var animateInterval = setInterval(animate, 30);
}
window.addEventListener('load', function(event) {
	initCanvas();
});

</script>
</head>
<body>
<canvas id="my_canvas" width="611" height="864"></canvas>
<h1 id="status"></h1>
</body>
</html>

I just removed the 

background:#FFF;

from the canvas css and the canvas became transparent. How you will line up the canvas over the kittens is up to you, I just quickly used position:relative and z-index to prove my point.

Upvotes: 1

Related Questions