Record Entire WebPage or Canvas2D


  1. Realtime Canvas2D-animation recording is supported on Firefox 44+, and Chrome 53+
  2. Older chrome supports webpage recording as well as canvas-2d animation recording. PS: Old Firefox is NOT supporting Canvas2D recording.


  1. Record entire DIV including video, image, textarea, input, drag/move/resize, everything
  2. Record canvas 2D drawings, lines, shapes, texts, images, drag/resize/enlarge/move via a huge drawing tool!
  3. Record Canvas2D Animation

This WebRTC experiment is using RecordRTC.js to record HTML/Canvas into webm; where html2canvas.js is used to capture HTML-snapshots. Those snapshots are encoded in webp; and then encoded again in webm.

You can say it: "HTML/Canvas Recording using RecordRTC"!

<script src=""></script>
<script src=""></script>
<div id="elementToShare" style="width:100%;height:100%;background:green;"></div>
var elementToShare = document.getElementById('elementToShare');
var recorder = RecordRTC(elementToShare, {
    type: 'canvas',
    showMousePointer: true
recorder.stopRecording(function(url) {;

Record <canvas>

<script src=""></script>
<script src=""></script>
var canvas = document.querySelector('canvas');
var recorder = new CanvasRecorder(window.canvasElementToBeRecorded, {
    disableLogs: false

// start recording <canvas> drawings

// a few minutes later
recorder.stop(function(blob) {
    var url = URL.createObjectURL(blob);;

Live Demo:

Watch a video:

RecordRTC is a server-less (entire client-side) JavaScript library can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording.

  1. RecordRTC to Node.js
  2. RecordRTC to PHP
  3. RecordRTC to ASP.NET MVC
  4. RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!
  5. MRecordRTC i.e. Multi-RecordRTC!
  6. RecordRTC on Ruby!
  7. RecordRTC over


RecordRTC.js is released under MIT licence . Copyright (c) Muaz Khan.