Skip to content

Instantly share code, notes, and snippets.

@cbosco

cbosco/shadowtransform.js

Created August 31, 2011 14:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cbosco/1183651 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cbosco/1183651 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cbosco created this gist Aug 31, 2011.
    44 changes: 44 additions & 0 deletions shadowtransform.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    /**
    * Usually shadowOffsetX and shadowOffsetY work as expected, but Android
    * browser has a known issue where it inverts shadowOffsetY.
    * (See http://code.google.com/p/android/issues/detail?id=16025)
    * So, we test for it, creating an offset object for x and y
    */
    var shadowTransform = (function() {
    // create a 3x3 canvas and put a 1px square in the middle
    var canvas = document.createElement('canvas');
    canvas.height = canvas.width = 3;
    // -1 means shadow SHOULD cast to top left pixel
    var offset = -1;

    var cc = canvas.getContext('2d');
    cc.shadowOffsetX = offset;
    cc.shadowOffsetY = offset;
    cc.shadowBlur = 1;
    cc.shadowColor = 'red';
    cc.fillRect(1, 1, 1, 1);

    var data = cc.getImageData(0, 0, 3, 3).data;
    var transform = { x: 1, y: 1 };
    // depending on where the shadow is cast, adjust transform
    switch(255) {
    case data[32]:
    transform.x = transform.y = -1;
    //alert('x is bad, y is bad');
    break;
    case data[24]:
    transform.y = -1;
    //alert('y is bad');
    break;
    case data[8]:
    transform.x = -1;
    //alert('x is bad');
    break;
    case data[0]:
    //alert('correct');
    break;
    };

    return transform;

    })();