Make Ghostwriter Canvas 100% Width/Height of Viewport

JavaScript
1

I found a really cool open source script @ https://developer.mozilla.org/en-US/demos/detail/ghostwriter-art-studio/launch Unfortunately, it appears to be more or less abandoned. I haven’t been able to contact the author and haven’t found any associated forums.

Anyway, I’d like to modify the code so that the drawing board effectively becomes a background for articles stored in my database. So imagine two articles - a short one with just six paragraphs and a really long one with fifty paragraphs. In each case, users should be able to select a drawing tool and underline or highlight text in either article, from the first paragraph or last paragraph.

So here’s my question: How can I give the canvas a height and width of 100%?

What makes it tricky is the fact that there are TWO canvases. From the main page (index.html)…

    <div id="drawing">
      <canvas id="artboard" width="750" height="500"></canvas>
      <canvas id="workboard" width="750" height="500"></canvas>

And from the file main.css…

#drawing {
  position: absolute;
  top: 0;
  right: 0;
  width: 750px;
  height: 500px;
  background: #eee url(/test/canvas/ghostwriter-new/images/paper3.jpg);
  box-shadow: 1px 1px 5px #000;
  cursor: url(/test/canvas/ghostwriter-new/images/chrome-cursor.png), none !important;
}

#artboard, #workboard {
  position: absolute;
  top: 0;
  left: 0;
  width: 750px;
  height: 500px;
}

Simply changing the values 750px and 500px to 100% doesn’t work.

It looks like this is essentially the solution:

(function() {
 var canvas = document.getElementById('artboard'),
        context = canvas.getContext('2d');

 // resize the canvas to fill browser window dynamically
 window.addEventListener('resize', resizeCanvas, false);

 function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        /**
         * Drawings need to be inside this function.
         */
        drawStuff(); 
 }
 resizeCanvas();

 function drawStuff() {
        // do your drawing stuff here
 }
})();

But I don’t know how to incorporate that into the file main.js…

(function($, ko) {
  
  // Create VM instances
  
  var canvas        = new Canvas('artboard', 'workboard'),
      drawing       = new Drawing(canvas);
      mouse         = new Mouse(),
      activebrush   = ko.observable(null),
      eraser        = new Brush(mouse, 'eraser', 'eraser_holder', activebrush, 'drawing', 'eraserRenderer', drawing),
      pen           = new Brush(mouse, 'pen', 'pen_holder', activebrush, 'drawing', 'inkRenderer', drawing)
      spraygun      = new Brush(mouse, 'spraygun', 'spraygun_holder', activebrush, 'drawing', 'sprayRenderer', drawing),
      marker        = new Brush(mouse, 'marker', 'marker_holder', activebrush, 'drawing', 'markerRenderer', drawing),
      palette       = new Palette(drawing),
      controls      = new Controls(drawing, palette);
  
  // Create Renderers
  
  var sprayRenderer   = new SprayRenderer(canvas, palette),
      inkRenderer     = new InkRenderer(canvas, palette),
      markerRenderer  = new MarkerRenderer(canvas, palette),
      eraserRenderer  = new EraserRenderer(canvas, palette);
    
  // Init ViewModels
  
  activebrush(pen);
  mouse.monitor();
  
  activebrush.subscribe(function (brush) {
    if (brush === null) {
      $('body').removeClass("brushy");
    }
    else {
      $('body').addClass("brushy");
    }
  });
  
  // Bind Views to ViewModel
  
  ko.applyBindings(pen, 'pen');
  ko.applyBindings(spraygun, 'spray');
  ko.applyBindings(marker, 'marker');
  ko.applyBindings(eraser, 'eraser');
  ko.applyBindings(controls, 'controls');
  
  // Non-standard bindings
  
  $('.color').click(function(event) {
    palette.active($(this).attr('data-color'));
    $('.color').removeClass('active');
    $(this).addClass('active');
  });
  
  // Modify the DOM
  
  $('.color').each(function(color) {
    $(this).css('background-color', 'rgb(' + $(this).attr('data-color') + ')');
  });

  // Disable text selection
  
  document.onselectstart = function() {return false;} // ie
  document.onmousedown = function() {return false;} // mozilla
  
  // Load any stored image
  
  drawing.load();
  
})(jQuery, ko);

Does anyone know how to merge those two codes? Or am I even on the right track?

Thanks.

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.