Firebase, drawing shared on web page

Hello friends,

here trying this code:

it is about drawing on a web page using Firebase. (you can change the drawing)


  • I have modified the above code a bit.
<meta name="viewport" content="width=100px, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src=""></script>
  <script src=""></script>
  <style>html,body {width: 200px;padding:0;
  background-image: url("");
  background-repeat: no-repeat;
<button onclick="myFunction()">Delete</button>
<p id="demo"></p>
function myFunction() {
  // document.getElementById("demo").innerHTML = "Hello World";
  var pixelDataRef2 = new Firebase('');
<div class="l-demo-container">
  <canvas id="drawing-canvas" width="250" height="420"></canvas>
  $(document).ready(function () {
    //Set up some globals
    var pixSize = 8, lastPoint = null, currentColor = "f00", mouseDown = 0;

    //Create a reference to the pixel data for our drawing.
    var pixelDataRef = new Firebase('');

    // Set up our canvas
    var myCanvas = document.getElementById('drawing-canvas');
    var myContext = myCanvas.getContext ? myCanvas.getContext('2d') : null;

    //Keep track of if the mouse is up or down
    myCanvas.onmousedown = function () {mouseDown = 1;};
    myCanvas.onmouseout = myCanvas.onmouseup = function () {
      mouseDown = 0; lastPoint = null;

    //Draw a line from the mouse's last position to its current position
    var drawLineOnMouseMove = function(e) {
      if (!mouseDown) return;

      var offset = $('canvas').offset();
      var x1 = Math.floor((e.pageX - offset.left) / pixSize ),
            y1 = Math.floor((e.pageY - / pixSize );
        // write the pixel into Firebase
           pixelDataRef.child(x1 + ":" + y1).set(currentColor);

    // Add callbacks that are fired any time the pixel data changes and adjusts the canvas appropriately.
    // Note that child_added events will be fired for initial pixel data as well.
    var drawPixel = function(snapshot) {
      var coords = snapshot.key().split(":");
      myContext.fillStyle = "#" + snapshot.val();
      myContext.fillRect(parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);
    var clearPixel = function(snapshot) {
      var coords = snapshot.key().split(":");
      myContext.clearRect(parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);
    pixelDataRef.on('child_added', drawPixel);
    pixelDataRef.on('child_changed', drawPixel);
    pixelDataRef.on('child_removed', clearPixel);
  • For it to work you need to have a Firebase account (Realtime Database).

  • In a web browser we can draw lines, but in the application we can only draw points.


  • We can also use Firebase Storage to "host" the image and the htm page.