A Mutable Log

A blog by Devendra Tewari

Project maintained by tewarid Hosted on GitHub Pages — Theme by mattgraham

Avoiding HTML5 canvas

Browsers on certain Android devices do not have a hardware accelerated canvas. They do however pan images quite well. The code below modifies the image drag example from my KineticJS post. This is of course quite a simple use case where Canvas is overkill.

  <title>no canvas</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <div id="container">
    <div id="imagediv" style="overflow: hidden"></div>
  $(document).ready(function() {
    var image = new Image();
    var url = 'https://apod.nasa.gov/apod/image/0802/crabmosaic_hst_big.jpg';

    image.onload = function() {
      var imagediv = $('div#imagediv');

      imagediv.css('background', 'url(' + url + ')');

      var idCount = 1;

      imagediv.on('click', function(event) {
        // this gets us a 16x16 px pin - deprecated by google
        var pinUrl = 'https://chart.googleapis.com/chart?chst=d_simple_text_icon_left&chld=|14|000|glyphish_target|24|0f0|FFF';

        // place pin on top of the image
        var pinid = 'pin'+idCount;

        $('div#container').append('<div id="' + pinid + '"></div>');

        var pinselector = '#'+pinid;
        var pindiv = $(pinselector);
        pindiv.css('width', '24px');
        pindiv.css('height', '24px');
        pindiv.css('position', 'absolute');
        pindiv.css('left', event.pageX - 12);
        pindiv.css('top', event.pageY - 12);
        pindiv.css('background', 'url(' + pinUrl + ')');

        $(pinselector).on('click', '', pinselector, function(event) {
      }); // imagediv click

    image.src = url; // this will fire onload event

You can place pins on the image by clicking anywhere on it. Click or touch a pin and it is removed. Pin placement in the Android browser is broken, pins may not appear where they should. I’ll update the post as soon as I discover why.

Once again, enjoy the Crab Nebula!