Advance

Next ❯Reference

Some useful methods you can use for your canvas element

  • turned_in_notAdvance Methods
    • captureStream()
    • toBlob()
    • toDataURL()


captureStream( )

Used to capture & play your canvas into video element

  • You can play your animated canvas into a video element

Syntax

canvas.captureStream(frameRate)

frameRate - Specifies number of frame per second to capture

You just play the video on your right first then MouseOver on the canvas to start animation & MouseOut to stop animation play on your video element
<canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//For animation 
var speed=3,y=50,animation;
function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ctx.beginPath();ctx.arc(100, y, 15, 0, Math.PI * 2, true);ctx.stroke();
  y+=speed;
  if (y+speed > canvas.height || y+speed <25) speed = -speed;
  animation = requestAnimationFrame(draw);
}
canvas.addEventListener('mouseover', function() { animation = requestAnimationFrame(draw); });
canvas.addEventListener('mouseout', function() { cancelAnimationFrame(animation); });

//For canvas video capture
var video = document.createElement('video');
video.controls=true;
video.srcObject = canvas.captureStream();
video.play();
document.body.appendChild(video);
setTimeout(function(){video.pause()},500);
</script>
captureStream


toBlob( )

Used to convert your canvas into an image format to show it as an image or to download

Syntax

canvas.toBlob(function(blob), imageType, imageQuality)

imageType - (default) 'image/png' or 'image/jpeg'
imageQuality - used only when imageType is 'image/jpeg' range (0.0-1.0) (1.0 means 100% image quality)

  • Remember! if you are making imageType 'image/jpeg' then fill your canvas with white color, since default fill color is black
    // Use it at the start, if imageType is 'image/jpeg'
ctx.fillStyle="white";
ctx.fillRect(0,0,300,300);
ctx.fillStyle="black"; //To set back to default colors
Rectangle in teal Box is a canvas and another on right is an image
<canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(10,10,180,80);
canvas.toBlob(function(blob) {
  var imgUrl = URL.createObjectURL(blob),
  newImg = document.createElement('img');
  newImg.src = imgUrl;
  document.body.appendChild(newImg);

  // To remove the url if not required
  newImg.onload = function() {
    URL.revokeObjectURL(imgUrl);
  };

},'image/png');
</script>
toBlob


toDataURL( )

Used to convert your canvas into an image format to show it as an image or to download

Syntax

canvas.toDataURL(imageType, imageQuality)

imageType - (default) 'image/png' or 'image/jpeg'
imageQuality - used only when imageType is 'image/jpeg' range (0.0-1.0) (1.0 means 100% image quality)

  • Remember! if you are making imageType 'image/jpeg' then fill your canvas with white color, since default fill color is black
    // Use it at the start, if imageType is 'image/jpeg'
ctx.fillStyle="white";
ctx.fillRect(0,0,300,300);
ctx.fillStyle="black"; //To set back to default colors
Text in teal Box is a canvas and another on right is an image
<canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="20px arial";
ctx.strokeText("Canvas Text !",20,80);
var imgUrl = canvas.toDataURL('image/png'),
    newImg = document.createElement('img');
    newImg.src = imgUrl;
document.body.appendChild(newImg);
</script>
toDataURL


  • Reference
❮ Prev Animation
Next ❯Reference
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯