Scrolling image with HTML5 canvas

JavaScript
1

I have a 360 degree photo I want to display a bit at a time and scroll right to left as on http://bubblepix.com/en/bubbles/4015

So far I have got the left-most part of the image displayed within a canvas but what do I do to get the image scrolling?

Thanks

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
}
</style>
<title>Canvas image</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var imageObj = new Image();

  imageObj.onload = function() {
    context.drawImage(imageObj, 70, 50);
  };
  imageObj.src = 'BubblePix_0.jpg';
</script>
</body>
</html>
2

Hey,

Setting up a simple timed loop and drawing images over the top of each other will work.
You’ll need to draw the image twice in a frame for the seam will be.
When the image is completely scrolled you need to reset the position to 0.


<!DOCTYPE HTML>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
}
</style>
<title>Canvas image</title>
</head>
<body>
<canvas id="myCanvas" width="450" height="329"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var image = new Image();

  image.onload = function() {
    var x = 0;
    var width = image.width;
    var min = 0-width;
    var step = 1;

    var loop = function() {
      context.drawImage(image, x, 0);
      context.drawImage(image, x + width, 0);
      x -= step;
      if (x < min) {
        x = 0;
      }
    };
    setInterval(loop, 1000 / 60);
  };

  image.src = 'norman-the-french-bulldog.jpg';
</script>
</body>
</html>

It’s probably easier to do this with CSS though…


<!DOCTYPE HTML>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
}
#slideshow {
  width: 450px;
  height: 329px;
  overflow: hidden;
}
#slider {
  background: url('norman-the-french-bulldog-1_34564_2009-09-23_w450.jpg');
  width: 900px;
  height: 329px;
  animation: slide 3s linear infinite;
}
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-450px);
  }
}
</style>
<title>Canvas image</title>
</head>
<body>
<div id="slideshow">
  <div id="slider"></div>
</div>

</body>
</html>
3

Hi Mark

Many thanks. The canvas method is great. The CSS method jumps when it starts again.

G :slight_smile:

4

No, the CSS method should work seamlessly as well.
The image that css was for was 450px wide, you would need to tweak these values.

e.g.


#slideshow {
  width: [B]width[/B];
  height: [B]height[/B];
  overflow: hidden;
}
#slider {
  background: url('[B]your image[/B]');
  width: [B]width * 2[/B];
  height: [B]height[/B];
  animation: slide 3s linear infinite;
}
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-[B]width[/B]);
  }
}
5

Ah - but my image is 2514px wide. I don’t see how that works as I only want to display part of the image at any time…

6

Brilliant,

this is very elegant
would like to make the same with Vertical scrolling
in canvas.

7

Hey Mark,

Would there be anyway I could do this with multiple images?