New Upstream Release - explorercanvas
Recent merge proposals
Ready changes
Summary
Merged new upstream version: 0.r4~git20200903.44ac99f (was: 0.r4~git20090427.0000000).
Resulting package
Built on 2023-01-11T02:23 (took 1m44s)
The resulting binary packages can be installed (if you have the apt repository enabled) by running one of:
apt install -t fresh-releases libjs-excanvas
Lintian Result
Diff
diff --git a/README b/README
index eb7c42f..91e80a4 100644
--- a/README
+++ b/README
@@ -16,7 +16,7 @@ INSTALLATION
Include the ExplorerCanvas tag in the same directory as your HTML files, and
add the following code to your page, preferably in the <head> tag.
-<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
+<!--[if lte IE 8]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
If you run into trouble, please look at the included example code to see how
-to best implement this
\ No newline at end of file
+to best implement this
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..ecf93ce
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,26 @@
+{
+ "name": "ExplorerCanvas",
+ "version": "1.0.0",
+ "main": "excanvas.js",
+ "homepage": "https://code.google.com/p/explorercanvas/",
+ "authors": [
+ "Google Open Source",
+ "Emil A Eklund",
+ "Erik Arvidsson",
+ "Glen Murphy"
+ ],
+ "keywords": [
+ "javascript",
+ "canvas"
+ ],
+ "description": "Modern browsers all support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to old versions of Internet Explorer (Internet Explorer 9+ supports canvas natively). To use, web developers only need to include a single script tag in their existing web pages.",
+ "license": "Apache License, Version 2.0",
+ "ignore": [
+ "examples",
+ "testcases",
+ "test",
+ "AUTHORS",
+ "COPYING",
+ "README"
+ ]
+}
\ No newline at end of file
diff --git a/debian/changelog b/debian/changelog
index 4a110b6..cb23f1b 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,8 +1,9 @@
-explorercanvas (0.r4~git20090427.0000000-5) UNRELEASED; urgency=medium
+explorercanvas (0.r4~git20200903.44ac99f-1) UNRELEASED; urgency=medium
* Update standards version to 4.6.2, no changes needed.
+ * New upstream snapshot.
- -- Debian Janitor <janitor@jelmer.uk> Sat, 07 Jan 2023 21:58:22 -0000
+ -- Debian Janitor <janitor@jelmer.uk> Wed, 11 Jan 2023 02:21:56 -0000
explorercanvas (0.r4~git20090427.0000000-4) unstable; urgency=medium
diff --git a/excanvas.js b/excanvas.js
index 367764b..52829f8 100644
--- a/excanvas.js
+++ b/excanvas.js
@@ -15,7 +15,7 @@
// Known Issues:
//
-// * Patterns are not implemented.
+// * Patterns only support repeat.
// * Radial gradient are not implemented. The VML version of these look very
// different from the canvas one.
// * Clipping paths are not implemented.
@@ -83,41 +83,43 @@ if (!document.createElement('canvas').getContext) {
};
}
- var G_vmlCanvasManager_ = {
- init: function(opt_doc) {
- if (/MSIE/.test(navigator.userAgent) && !window.opera) {
- var doc = opt_doc || document;
- // Create a dummy element so that IE will allow canvas elements to be
- // recognized.
- doc.createElement('canvas');
- doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
- }
- },
+ function encodeHtmlAttribute(s) {
+ return String(s).replace(/&/g, '&').replace(/"/g, '"');
+ }
- init_: function(doc) {
- // create xmlns
- if (!doc.namespaces['g_vml_']) {
- doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml',
- '#default#VML');
+ function addNamespace(doc, prefix, urn) {
+ if (!doc.namespaces[prefix]) {
+ doc.namespaces.add(prefix, urn, '#default#VML');
+ }
+ }
- }
- if (!doc.namespaces['g_o_']) {
- doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office',
- '#default#VML');
- }
+ function addNamespacesAndStylesheet(doc) {
+ addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
+ addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
+
+ // Setup default CSS. Only add one style sheet per document
+ if (!doc.styleSheets['ex_canvas_']) {
+ var ss = doc.createStyleSheet();
+ ss.owningElement.id = 'ex_canvas_';
+ ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
+ // default size is 300x150 in Gecko and Opera
+ 'text-align:left;width:300px;height:150px}';
+ }
+ }
- // Setup default CSS. Only add one style sheet per document
- if (!doc.styleSheets['ex_canvas_']) {
- var ss = doc.createStyleSheet();
- ss.owningElement.id = 'ex_canvas_';
- ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
- // default size is 300x150 in Gecko and Opera
- 'text-align:left;width:300px;height:150px}' +
- 'g_vml_\\:*{behavior:url(#default#VML)}' +
- 'g_o_\\:*{behavior:url(#default#VML)}';
+ // Add namespaces and stylesheet at startup.
+ addNamespacesAndStylesheet(document);
- }
+ var G_vmlCanvasManager_ = {
+ init: function(opt_doc) {
+ var doc = opt_doc || document;
+ // Create a dummy element so that IE will allow canvas elements to be
+ // recognized.
+ doc.createElement('canvas');
+ doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
+ },
+ init_: function(doc) {
// find all canvas elements
var els = doc.getElementsByTagName('canvas');
for (var i = 0; i < els.length; i++) {
@@ -135,9 +137,11 @@ if (!document.createElement('canvas').getContext) {
*/
initElement: function(el) {
if (!el.getContext) {
-
el.getContext = getContext;
+ // Add namespaces and stylesheet to document of the element.
+ addNamespacesAndStylesheet(el.ownerDocument);
+
// Remove fallback content. There is no way to hide text nodes so we
// just remove all childNodes. We could hide all elements and remove
// text nodes but who really cares about the fallback content.
@@ -173,12 +177,15 @@ if (!document.createElement('canvas').getContext) {
switch (e.propertyName) {
case 'width':
- el.style.width = el.attributes.width.nodeValue + 'px';
el.getContext().clearRect();
+ el.style.width = el.attributes.width.nodeValue + 'px';
+ // In IE8 this does not trigger onresize.
+ el.firstChild.style.width = el.clientWidth + 'px';
break;
case 'height':
- el.style.height = el.attributes.height.nodeValue + 'px';
el.getContext().clearRect();
+ el.style.height = el.attributes.height.nodeValue + 'px';
+ el.firstChild.style.height = el.clientHeight + 'px';
break;
}
}
@@ -194,10 +201,10 @@ if (!document.createElement('canvas').getContext) {
G_vmlCanvasManager_.init();
// precompute "00" to "FF"
- var dec2hex = [];
+ var decToHex = [];
for (var i = 0; i < 16; i++) {
for (var j = 0; j < 16; j++) {
- dec2hex[i * 16 + j] = i.toString(16) + j.toString(16);
+ decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
}
}
@@ -238,54 +245,326 @@ if (!document.createElement('canvas').getContext) {
o2.shadowOffsetY = o1.shadowOffsetY;
o2.strokeStyle = o1.strokeStyle;
o2.globalAlpha = o1.globalAlpha;
+ o2.font = o1.font;
+ o2.textAlign = o1.textAlign;
+ o2.textBaseline = o1.textBaseline;
o2.arcScaleX_ = o1.arcScaleX_;
o2.arcScaleY_ = o1.arcScaleY_;
o2.lineScale_ = o1.lineScale_;
}
+ var colorData = {
+ aliceblue: '#F0F8FF',
+ antiquewhite: '#FAEBD7',
+ aquamarine: '#7FFFD4',
+ azure: '#F0FFFF',
+ beige: '#F5F5DC',
+ bisque: '#FFE4C4',
+ black: '#000000',
+ blanchedalmond: '#FFEBCD',
+ blueviolet: '#8A2BE2',
+ brown: '#A52A2A',
+ burlywood: '#DEB887',
+ cadetblue: '#5F9EA0',
+ chartreuse: '#7FFF00',
+ chocolate: '#D2691E',
+ coral: '#FF7F50',
+ cornflowerblue: '#6495ED',
+ cornsilk: '#FFF8DC',
+ crimson: '#DC143C',
+ cyan: '#00FFFF',
+ darkblue: '#00008B',
+ darkcyan: '#008B8B',
+ darkgoldenrod: '#B8860B',
+ darkgray: '#A9A9A9',
+ darkgreen: '#006400',
+ darkgrey: '#A9A9A9',
+ darkkhaki: '#BDB76B',
+ darkmagenta: '#8B008B',
+ darkolivegreen: '#556B2F',
+ darkorange: '#FF8C00',
+ darkorchid: '#9932CC',
+ darkred: '#8B0000',
+ darksalmon: '#E9967A',
+ darkseagreen: '#8FBC8F',
+ darkslateblue: '#483D8B',
+ darkslategray: '#2F4F4F',
+ darkslategrey: '#2F4F4F',
+ darkturquoise: '#00CED1',
+ darkviolet: '#9400D3',
+ deeppink: '#FF1493',
+ deepskyblue: '#00BFFF',
+ dimgray: '#696969',
+ dimgrey: '#696969',
+ dodgerblue: '#1E90FF',
+ firebrick: '#B22222',
+ floralwhite: '#FFFAF0',
+ forestgreen: '#228B22',
+ gainsboro: '#DCDCDC',
+ ghostwhite: '#F8F8FF',
+ gold: '#FFD700',
+ goldenrod: '#DAA520',
+ grey: '#808080',
+ greenyellow: '#ADFF2F',
+ honeydew: '#F0FFF0',
+ hotpink: '#FF69B4',
+ indianred: '#CD5C5C',
+ indigo: '#4B0082',
+ ivory: '#FFFFF0',
+ khaki: '#F0E68C',
+ lavender: '#E6E6FA',
+ lavenderblush: '#FFF0F5',
+ lawngreen: '#7CFC00',
+ lemonchiffon: '#FFFACD',
+ lightblue: '#ADD8E6',
+ lightcoral: '#F08080',
+ lightcyan: '#E0FFFF',
+ lightgoldenrodyellow: '#FAFAD2',
+ lightgreen: '#90EE90',
+ lightgrey: '#D3D3D3',
+ lightpink: '#FFB6C1',
+ lightsalmon: '#FFA07A',
+ lightseagreen: '#20B2AA',
+ lightskyblue: '#87CEFA',
+ lightslategray: '#778899',
+ lightslategrey: '#778899',
+ lightsteelblue: '#B0C4DE',
+ lightyellow: '#FFFFE0',
+ limegreen: '#32CD32',
+ linen: '#FAF0E6',
+ magenta: '#FF00FF',
+ mediumaquamarine: '#66CDAA',
+ mediumblue: '#0000CD',
+ mediumorchid: '#BA55D3',
+ mediumpurple: '#9370DB',
+ mediumseagreen: '#3CB371',
+ mediumslateblue: '#7B68EE',
+ mediumspringgreen: '#00FA9A',
+ mediumturquoise: '#48D1CC',
+ mediumvioletred: '#C71585',
+ midnightblue: '#191970',
+ mintcream: '#F5FFFA',
+ mistyrose: '#FFE4E1',
+ moccasin: '#FFE4B5',
+ navajowhite: '#FFDEAD',
+ oldlace: '#FDF5E6',
+ olivedrab: '#6B8E23',
+ orange: '#FFA500',
+ orangered: '#FF4500',
+ orchid: '#DA70D6',
+ palegoldenrod: '#EEE8AA',
+ palegreen: '#98FB98',
+ paleturquoise: '#AFEEEE',
+ palevioletred: '#DB7093',
+ papayawhip: '#FFEFD5',
+ peachpuff: '#FFDAB9',
+ peru: '#CD853F',
+ pink: '#FFC0CB',
+ plum: '#DDA0DD',
+ powderblue: '#B0E0E6',
+ rosybrown: '#BC8F8F',
+ royalblue: '#4169E1',
+ saddlebrown: '#8B4513',
+ salmon: '#FA8072',
+ sandybrown: '#F4A460',
+ seagreen: '#2E8B57',
+ seashell: '#FFF5EE',
+ sienna: '#A0522D',
+ skyblue: '#87CEEB',
+ slateblue: '#6A5ACD',
+ slategray: '#708090',
+ slategrey: '#708090',
+ snow: '#FFFAFA',
+ springgreen: '#00FF7F',
+ steelblue: '#4682B4',
+ tan: '#D2B48C',
+ thistle: '#D8BFD8',
+ tomato: '#FF6347',
+ turquoise: '#40E0D0',
+ violet: '#EE82EE',
+ wheat: '#F5DEB3',
+ whitesmoke: '#F5F5F5',
+ yellowgreen: '#9ACD32'
+ };
+
+
+ function getRgbHslContent(styleString) {
+ var start = styleString.indexOf('(', 3);
+ var end = styleString.indexOf(')', start + 1);
+ var parts = styleString.substring(start + 1, end).split(',');
+ // add alpha if needed
+ if (parts.length != 4 || styleString.charAt(3) != 'a') {
+ parts[3] = 1;
+ }
+ return parts;
+ }
+
+ function percent(s) {
+ return parseFloat(s) / 100;
+ }
+
+ function clamp(v, min, max) {
+ return Math.min(max, Math.max(min, v));
+ }
+
+ function hslToRgb(parts){
+ var r, g, b, h, s, l;
+ h = parseFloat(parts[0]) / 360 % 360;
+ if (h < 0)
+ h++;
+ s = clamp(percent(parts[1]), 0, 1);
+ l = clamp(percent(parts[2]), 0, 1);
+ if (s == 0) {
+ r = g = b = l; // achromatic
+ } else {
+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+ var p = 2 * l - q;
+ r = hueToRgb(p, q, h + 1 / 3);
+ g = hueToRgb(p, q, h);
+ b = hueToRgb(p, q, h - 1 / 3);
+ }
+
+ return '#' + decToHex[Math.floor(r * 255)] +
+ decToHex[Math.floor(g * 255)] +
+ decToHex[Math.floor(b * 255)];
+ }
+
+ function hueToRgb(m1, m2, h) {
+ if (h < 0)
+ h++;
+ if (h > 1)
+ h--;
+
+ if (6 * h < 1)
+ return m1 + (m2 - m1) * 6 * h;
+ else if (2 * h < 1)
+ return m2;
+ else if (3 * h < 2)
+ return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+ else
+ return m1;
+ }
+
+ var processStyleCache = {};
+
function processStyle(styleString) {
+ if (styleString in processStyleCache) {
+ return processStyleCache[styleString];
+ }
+
var str, alpha = 1;
styleString = String(styleString);
- if (styleString.substring(0, 3) == 'rgb') {
- var start = styleString.indexOf('(', 3);
- var end = styleString.indexOf(')', start + 1);
- var guts = styleString.substring(start + 1, end).split(',');
-
- str = '#';
+ if (styleString.charAt(0) == '#') {
+ str = styleString;
+ } else if (/^rgb/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ var str = '#', n;
for (var i = 0; i < 3; i++) {
- str += dec2hex[Number(guts[i])];
+ if (parts[i].indexOf('%') != -1) {
+ n = Math.floor(percent(parts[i]) * 255);
+ } else {
+ n = +parts[i];
+ }
+ str += decToHex[clamp(n, 0, 255)];
}
+ alpha = +parts[3];
+ } else if (/^hsl/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ str = hslToRgb(parts);
+ alpha = parts[3];
+ } else {
+ str = colorData[styleString] || styleString;
+ }
+ return processStyleCache[styleString] = {color: str, alpha: alpha};
+ }
- if (guts.length == 4 && styleString.substr(3, 1) == 'a') {
- alpha = guts[3];
- }
+ var DEFAULT_STYLE = {
+ style: 'normal',
+ variant: 'normal',
+ weight: 'normal',
+ size: 10,
+ family: 'sans-serif'
+ };
+
+ // Internal text style cache
+ var fontStyleCache = {};
+
+ function processFontStyle(styleString) {
+ if (fontStyleCache[styleString]) {
+ return fontStyleCache[styleString];
+ }
+
+ var el = document.createElement('div');
+ var style = el.style;
+ try {
+ style.font = styleString;
+ } catch (ex) {
+ // Ignore failures to set to invalid font.
+ }
+
+ return fontStyleCache[styleString] = {
+ style: style.fontStyle || DEFAULT_STYLE.style,
+ variant: style.fontVariant || DEFAULT_STYLE.variant,
+ weight: style.fontWeight || DEFAULT_STYLE.weight,
+ size: style.fontSize || DEFAULT_STYLE.size,
+ family: style.fontFamily || DEFAULT_STYLE.family
+ };
+ }
+
+ function getComputedStyle(style, element) {
+ var computedStyle = {};
+
+ for (var p in style) {
+ computedStyle[p] = style[p];
+ }
+
+ // Compute the size
+ var canvasFontSize = parseFloat(element.currentStyle.fontSize),
+ fontSize = parseFloat(style.size);
+
+ if (typeof style.size == 'number') {
+ computedStyle.size = style.size;
+ } else if (style.size.indexOf('px') != -1) {
+ computedStyle.size = fontSize;
+ } else if (style.size.indexOf('em') != -1) {
+ computedStyle.size = canvasFontSize * fontSize;
+ } else if(style.size.indexOf('%') != -1) {
+ computedStyle.size = (canvasFontSize / 100) * fontSize;
+ } else if (style.size.indexOf('pt') != -1) {
+ computedStyle.size = fontSize / .75;
} else {
- str = styleString;
+ computedStyle.size = canvasFontSize;
}
- return {color: str, alpha: alpha};
+ // Different scaling between normal text and VML text. This was found using
+ // trial and error to get the same size as non VML text.
+ computedStyle.size *= 0.981;
+
+ return computedStyle;
}
+ function buildStyle(style) {
+ return style.style + ' ' + style.variant + ' ' + style.weight + ' ' +
+ style.size + 'px ' + style.family;
+ }
+
+ var lineCapMap = {
+ 'butt': 'flat',
+ 'round': 'round'
+ };
+
function processLineCap(lineCap) {
- switch (lineCap) {
- case 'butt':
- return 'flat';
- case 'round':
- return 'round';
- case 'square':
- default:
- return 'square';
- }
+ return lineCapMap[lineCap] || 'square';
}
/**
* This class implements CanvasRenderingContext2D interface as described by
* the WHATWG.
- * @param {HTMLElement} surfaceElement The element that the 2D context should
+ * @param {HTMLElement} canvasElement The element that the 2D context should
* be associated with
*/
- function CanvasRenderingContext2D_(surfaceElement) {
+ function CanvasRenderingContext2D_(canvasElement) {
this.m_ = createMatrixIdentity();
this.mStack_ = [];
@@ -301,14 +580,22 @@ if (!document.createElement('canvas').getContext) {
this.lineCap = 'butt';
this.miterLimit = Z * 1;
this.globalAlpha = 1;
- this.canvas = surfaceElement;
-
- var el = surfaceElement.ownerDocument.createElement('div');
- el.style.width = surfaceElement.clientWidth + 'px';
- el.style.height = surfaceElement.clientHeight + 'px';
- el.style.overflow = 'hidden';
- el.style.position = 'absolute';
- surfaceElement.appendChild(el);
+ this.font = '10px sans-serif';
+ this.textAlign = 'left';
+ this.textBaseline = 'alphabetic';
+ this.canvas = canvasElement;
+
+ var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' +
+ canvasElement.clientHeight + 'px;overflow:hidden;position:absolute';
+ var el = canvasElement.ownerDocument.createElement('div');
+ el.style.cssText = cssText;
+ canvasElement.appendChild(el);
+
+ var overlayEl = el.cloneNode(false);
+ // Use a non transparent background.
+ overlayEl.style.backgroundColor = 'red';
+ overlayEl.style.filter = 'alpha(opacity=0)';
+ canvasElement.appendChild(overlayEl);
this.element_ = el;
this.arcScaleX_ = 1;
@@ -318,6 +605,10 @@ if (!document.createElement('canvas').getContext) {
var contextPrototype = CanvasRenderingContext2D_.prototype;
contextPrototype.clearRect = function() {
+ if (this.textMeasureEl_) {
+ this.textMeasureEl_.removeNode(true);
+ this.textMeasureEl_ = null;
+ }
this.element_.innerHTML = '';
};
@@ -328,14 +619,14 @@ if (!document.createElement('canvas').getContext) {
};
contextPrototype.moveTo = function(aX, aY) {
- var p = this.getCoords_(aX, aY);
+ var p = getCoords(this, aX, aY);
this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
this.currentX_ = p.x;
this.currentY_ = p.y;
};
contextPrototype.lineTo = function(aX, aY) {
- var p = this.getCoords_(aX, aY);
+ var p = getCoords(this, aX, aY);
this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
this.currentX_ = p.x;
@@ -345,9 +636,9 @@ if (!document.createElement('canvas').getContext) {
contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
aCP2x, aCP2y,
aX, aY) {
- var p = this.getCoords_(aX, aY);
- var cp1 = this.getCoords_(aCP1x, aCP1y);
- var cp2 = this.getCoords_(aCP2x, aCP2y);
+ var p = getCoords(this, aX, aY);
+ var cp1 = getCoords(this, aCP1x, aCP1y);
+ var cp2 = getCoords(this, aCP2x, aCP2y);
bezierCurveTo(this, cp1, cp2, p);
};
@@ -370,8 +661,8 @@ if (!document.createElement('canvas').getContext) {
// the following is lifted almost directly from
// http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
- var cp = this.getCoords_(aCPx, aCPy);
- var p = this.getCoords_(aX, aY);
+ var cp = getCoords(this, aCPx, aCPy);
+ var p = getCoords(this, aX, aY);
var cp1 = {
x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
@@ -402,9 +693,9 @@ if (!document.createElement('canvas').getContext) {
// that can be represented in binary
}
- var p = this.getCoords_(aX, aY);
- var pStart = this.getCoords_(xStart, yStart);
- var pEnd = this.getCoords_(xEnd, yEnd);
+ var p = getCoords(this, aX, aY);
+ var pStart = getCoords(this, xStart, yStart);
+ var pEnd = getCoords(this, xEnd, yEnd);
this.currentPath_.push({type: arcType,
x: p.x,
@@ -518,7 +809,7 @@ if (!document.createElement('canvas').getContext) {
throw Error('Invalid number of arguments');
}
- var d = this.getCoords_(dx, dy);
+ var d = getCoords(this, dx, dy);
var w2 = sw / 2;
var h2 = sh / 2;
@@ -539,7 +830,8 @@ if (!document.createElement('canvas').getContext) {
// The following check doesn't account for skews (which don't exist
// in the canvas spec (yet) anyway.
- if (this.m_[0][0] != 1 || this.m_[0][1]) {
+ if (this.m_[0][0] != 1 || this.m_[0][1] ||
+ this.m_[1][1] != 1 || this.m_[1][0]) {
var filter = [];
// Note the 12/21 reversal
@@ -553,16 +845,17 @@ if (!document.createElement('canvas').getContext) {
// Bounding box calculation (need to minimize displayed area so that
// filters don't waste time on unused pixels.
var max = d;
- var c2 = this.getCoords_(dx + dw, dy);
- var c3 = this.getCoords_(dx, dy + dh);
- var c4 = this.getCoords_(dx + dw, dy + dh);
+ var c2 = getCoords(this, dx + dw, dy);
+ var c3 = getCoords(this, dx, dy + dh);
+ var c4 = getCoords(this, dx + dw, dy + dh);
max.x = m.max(max.x, c2.x, c3.x, c4.x);
max.y = m.max(max.y, c2.y, c3.y, c4.y);
vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
- filter.join(''), ", sizingmethod='clip');")
+ filter.join(''), ", sizingmethod='clip');");
+
} else {
vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
}
@@ -570,7 +863,7 @@ if (!document.createElement('canvas').getContext) {
vmlStr.push(' ">' ,
'<g_vml_:image src="', image.src, '"',
' style="width:', Z * dw, 'px;',
- ' height:', Z * dh, 'px;"',
+ ' height:', Z * dh, 'px"',
' cropleft="', sx / w, '"',
' croptop="', sy / h, '"',
' cropright="', (w - sx - sw) / w, '"',
@@ -578,16 +871,12 @@ if (!document.createElement('canvas').getContext) {
' />',
'</g_vml_:group>');
- this.element_.insertAdjacentHTML('BeforeEnd',
- vmlStr.join(''));
+ this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
};
contextPrototype.stroke = function(aFill) {
var lineStr = [];
var lineOpen = false;
- var a = processStyle(aFill ? this.fillStyle : this.strokeStyle);
- var color = a.color;
- var opacity = a.alpha * this.globalAlpha;
var W = 10;
var H = 10;
@@ -595,7 +884,8 @@ if (!document.createElement('canvas').getContext) {
lineStr.push('<g_vml_:shape',
' filled="', !!aFill, '"',
' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
- ' coordorigin="0 0" coordsize="', Z * W, ' ', Z * H, '"',
+ ' coordorigin="0,0"',
+ ' coordsize="', Z * W, ',', Z * H, '"',
' stroked="', !aFill, '"',
' path="');
@@ -661,25 +951,47 @@ if (!document.createElement('canvas').getContext) {
lineStr.push(' ">');
if (!aFill) {
- var lineWidth = this.lineScale_ * this.lineWidth;
+ appendStroke(this, lineStr);
+ } else {
+ appendFill(this, lineStr, min, max);
+ }
- // VML cannot correctly render a line if the width is less than 1px.
- // In that case, we dilute the color to make the line look thinner.
- if (lineWidth < 1) {
- opacity *= lineWidth;
- }
+ lineStr.push('</g_vml_:shape>');
+
+ this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
+ };
+
+ function appendStroke(ctx, lineStr) {
+ var a = processStyle(ctx.strokeStyle);
+ var color = a.color;
+ var opacity = a.alpha * ctx.globalAlpha;
+ var lineWidth = ctx.lineScale_ * ctx.lineWidth;
+
+ // VML cannot correctly render a line if the width is less than 1px.
+ // In that case, we dilute the color to make the line look thinner.
+ if (lineWidth < 1) {
+ opacity *= lineWidth;
+ }
+
+ lineStr.push(
+ '<g_vml_:stroke',
+ ' opacity="', opacity, '"',
+ ' joinstyle="', ctx.lineJoin, '"',
+ ' miterlimit="', ctx.miterLimit, '"',
+ ' endcap="', processLineCap(ctx.lineCap), '"',
+ ' weight="', lineWidth, 'px"',
+ ' color="', color, '" />'
+ );
+ }
- lineStr.push(
- '<g_vml_:stroke',
- ' opacity="', opacity, '"',
- ' joinstyle="', this.lineJoin, '"',
- ' miterlimit="', this.miterLimit, '"',
- ' endcap="', processLineCap(this.lineCap), '"',
- ' weight="', lineWidth, 'px"',
- ' color="', color, '" />'
- );
- } else if (typeof this.fillStyle == 'object') {
- var fillStyle = this.fillStyle;
+ function appendFill(ctx, lineStr, min, max) {
+ var fillStyle = ctx.fillStyle;
+ var arcScaleX = ctx.arcScaleX_;
+ var arcScaleY = ctx.arcScaleY_;
+ var width = max.x - min.x;
+ var height = max.y - min.y;
+ if (fillStyle instanceof CanvasGradient_) {
+ // TODO: Gradients transformed with the transformation matrix.
var angle = 0;
var focus = {x: 0, y: 0};
@@ -689,12 +1001,12 @@ if (!document.createElement('canvas').getContext) {
var expansion = 1;
if (fillStyle.type_ == 'gradient') {
- var x0 = fillStyle.x0_ / this.arcScaleX_;
- var y0 = fillStyle.y0_ / this.arcScaleY_;
- var x1 = fillStyle.x1_ / this.arcScaleX_;
- var y1 = fillStyle.y1_ / this.arcScaleY_;
- var p0 = this.getCoords_(x0, y0);
- var p1 = this.getCoords_(x1, y1);
+ var x0 = fillStyle.x0_ / arcScaleX;
+ var y0 = fillStyle.y0_ / arcScaleY;
+ var x1 = fillStyle.x1_ / arcScaleX;
+ var y1 = fillStyle.y1_ / arcScaleY;
+ var p0 = getCoords(ctx, x0, y0);
+ var p1 = getCoords(ctx, x1, y1);
var dx = p1.x - p0.x;
var dy = p1.y - p0.y;
angle = Math.atan2(dx, dy) * 180 / Math.PI;
@@ -710,16 +1022,14 @@ if (!document.createElement('canvas').getContext) {
angle = 0;
}
} else {
- var p0 = this.getCoords_(fillStyle.x0_, fillStyle.y0_);
- var width = max.x - min.x;
- var height = max.y - min.y;
+ var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
focus = {
x: (p0.x - min.x) / width,
y: (p0.y - min.y) / height
};
- width /= this.arcScaleX_ * Z;
- height /= this.arcScaleY_ * Z;
+ width /= arcScaleX * Z;
+ height /= arcScaleY * Z;
var dimension = m.max(width, height);
shift = 2 * fillStyle.r0_ / dimension;
expansion = 2 * fillStyle.r1_ / dimension - shift;
@@ -735,8 +1045,8 @@ if (!document.createElement('canvas').getContext) {
var length = stops.length;
var color1 = stops[0].color;
var color2 = stops[length - 1].color;
- var opacity1 = stops[0].alpha * this.globalAlpha;
- var opacity2 = stops[length - 1].alpha * this.globalAlpha;
+ var opacity1 = stops[0].alpha * ctx.globalAlpha;
+ var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;
var colors = [];
for (var i = 0; i < length; i++) {
@@ -755,33 +1065,42 @@ if (!document.createElement('canvas').getContext) {
' g_o_:opacity2="', opacity1, '"',
' angle="', angle, '"',
' focusposition="', focus.x, ',', focus.y, '" />');
+ } else if (fillStyle instanceof CanvasPattern_) {
+ if (width && height) {
+ var deltaLeft = -min.x;
+ var deltaTop = -min.y;
+ lineStr.push('<g_vml_:fill',
+ ' position="',
+ deltaLeft / width * arcScaleX * arcScaleX, ',',
+ deltaTop / height * arcScaleY * arcScaleY, '"',
+ ' type="tile"',
+ // TODO: Figure out the correct size to fit the scale.
+ //' size="', w, 'px ', h, 'px"',
+ ' src="', fillStyle.src_, '" />');
+ }
} else {
+ var a = processStyle(ctx.fillStyle);
+ var color = a.color;
+ var opacity = a.alpha * ctx.globalAlpha;
lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
'" />');
}
-
- lineStr.push('</g_vml_:shape>');
-
- this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
- };
+ }
contextPrototype.fill = function() {
this.stroke(true);
- }
+ };
contextPrototype.closePath = function() {
this.currentPath_.push({type: 'close'});
};
- /**
- * @private
- */
- contextPrototype.getCoords_ = function(aX, aY) {
- var m = this.m_;
+ function getCoords(ctx, aX, aY) {
+ var m = ctx.m_;
return {
x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
- }
+ };
};
contextPrototype.save = function() {
@@ -793,19 +1112,16 @@ if (!document.createElement('canvas').getContext) {
};
contextPrototype.restore = function() {
- copyState(this.aStack_.pop(), this);
- this.m_ = this.mStack_.pop();
+ if (this.aStack_.length) {
+ copyState(this.aStack_.pop(), this);
+ this.m_ = this.mStack_.pop();
+ }
};
function matrixIsFinite(m) {
- for (var j = 0; j < 3; j++) {
- for (var k = 0; k < 2; k++) {
- if (!isFinite(m[j][k]) || isNaN(m[j][k])) {
- return false;
- }
- }
- }
- return true;
+ return isFinite(m[0][0]) && isFinite(m[0][1]) &&
+ isFinite(m[1][0]) && isFinite(m[1][1]) &&
+ isFinite(m[2][0]) && isFinite(m[2][1]);
}
function setM(ctx, m, updateLineScale) {
@@ -879,6 +1195,124 @@ if (!document.createElement('canvas').getContext) {
setM(this, m, true);
};
+ /**
+ * The text drawing function.
+ * The maxWidth argument isn't taken in account, since no browser supports
+ * it yet.
+ */
+ contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
+ var m = this.m_,
+ delta = 1000,
+ left = 0,
+ right = delta,
+ offset = {x: 0, y: 0},
+ lineStr = [];
+
+ var fontStyle = getComputedStyle(processFontStyle(this.font),
+ this.element_);
+
+ var fontStyleString = buildStyle(fontStyle);
+
+ var elementStyle = this.element_.currentStyle;
+ var textAlign = this.textAlign.toLowerCase();
+ switch (textAlign) {
+ case 'left':
+ case 'center':
+ case 'right':
+ break;
+ case 'end':
+ textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left';
+ break;
+ case 'start':
+ textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left';
+ break;
+ default:
+ textAlign = 'left';
+ }
+
+ // 1.75 is an arbitrary number, as there is no info about the text baseline
+ switch (this.textBaseline) {
+ case 'hanging':
+ case 'top':
+ offset.y = fontStyle.size / 1.75;
+ break;
+ case 'middle':
+ break;
+ default:
+ case null:
+ case 'alphabetic':
+ case 'ideographic':
+ case 'bottom':
+ offset.y = -fontStyle.size / 2.25;
+ break;
+ }
+
+ switch(textAlign) {
+ case 'right':
+ left = delta;
+ right = 0.05;
+ break;
+ case 'center':
+ left = right = delta / 2;
+ break;
+ }
+
+ var d = getCoords(this, x + offset.x, y + offset.y);
+
+ lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
+ ' coordsize="100 100" coordorigin="0 0"',
+ ' filled="', !stroke, '" stroked="', !!stroke,
+ '" style="position:absolute;width:1px;height:1px;">');
+
+ if (stroke) {
+ appendStroke(this, lineStr);
+ } else {
+ // TODO: Fix the min and max params.
+ appendFill(this, lineStr, {x: -left, y: 0},
+ {x: right, y: fontStyle.size});
+ }
+
+ var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
+ m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
+
+ var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
+
+ lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ',
+ ' offset="', skewOffset, '" origin="', left ,' 0" />',
+ '<g_vml_:path textpathok="true" />',
+ '<g_vml_:textpath on="true" string="',
+ encodeHtmlAttribute(text),
+ '" style="v-text-align:', textAlign,
+ ';font:', encodeHtmlAttribute(fontStyleString),
+ '" /></g_vml_:line>');
+
+ this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
+ };
+
+ contextPrototype.fillText = function(text, x, y, maxWidth) {
+ this.drawText_(text, x, y, maxWidth, false);
+ };
+
+ contextPrototype.strokeText = function(text, x, y, maxWidth) {
+ this.drawText_(text, x, y, maxWidth, true);
+ };
+
+ contextPrototype.measureText = function(text) {
+ if (!this.textMeasureEl_) {
+ var s = '<span style="position:absolute;' +
+ 'top:-20000px;left:0;padding:0;margin:0;border:none;' +
+ 'white-space:pre;"></span>';
+ this.element_.insertAdjacentHTML('beforeEnd', s);
+ this.textMeasureEl_ = this.element_.lastChild;
+ }
+ var doc = this.element_.ownerDocument;
+ this.textMeasureEl_.innerHTML = '';
+ this.textMeasureEl_.style.font = this.font;
+ // Don't use innerHTML or innerText because they allow markup/whitespace.
+ this.textMeasureEl_.appendChild(doc.createTextNode(text));
+ return {width: this.textMeasureEl_.offsetWidth};
+ };
+
/******** STUBS ********/
contextPrototype.clip = function() {
// TODO: Implement
@@ -888,8 +1322,8 @@ if (!document.createElement('canvas').getContext) {
// TODO: Implement
};
- contextPrototype.createPattern = function() {
- return new CanvasPattern_;
+ contextPrototype.createPattern = function(image, repetition) {
+ return new CanvasPattern_(image, repetition);
};
// Gradient / Pattern Stubs
@@ -911,14 +1345,70 @@ if (!document.createElement('canvas').getContext) {
alpha: aColor.alpha});
};
- function CanvasPattern_() {}
+ function CanvasPattern_(image, repetition) {
+ assertImageIsValid(image);
+ switch (repetition) {
+ case 'repeat':
+ case null:
+ case '':
+ this.repetition_ = 'repeat';
+ break
+ case 'repeat-x':
+ case 'repeat-y':
+ case 'no-repeat':
+ this.repetition_ = repetition;
+ break;
+ default:
+ throwException('SYNTAX_ERR');
+ }
+
+ this.src_ = image.src;
+ this.width_ = image.width;
+ this.height_ = image.height;
+ }
+
+ function throwException(s) {
+ throw new DOMException_(s);
+ }
+
+ function assertImageIsValid(img) {
+ if (!img || img.nodeType != 1 || img.tagName != 'IMG') {
+ throwException('TYPE_MISMATCH_ERR');
+ }
+ if (img.readyState != 'complete') {
+ throwException('INVALID_STATE_ERR');
+ }
+ }
+
+ function DOMException_(s) {
+ this.code = this[s];
+ this.message = s +': DOM Exception ' + this.code;
+ }
+ var p = DOMException_.prototype = new Error;
+ p.INDEX_SIZE_ERR = 1;
+ p.DOMSTRING_SIZE_ERR = 2;
+ p.HIERARCHY_REQUEST_ERR = 3;
+ p.WRONG_DOCUMENT_ERR = 4;
+ p.INVALID_CHARACTER_ERR = 5;
+ p.NO_DATA_ALLOWED_ERR = 6;
+ p.NO_MODIFICATION_ALLOWED_ERR = 7;
+ p.NOT_FOUND_ERR = 8;
+ p.NOT_SUPPORTED_ERR = 9;
+ p.INUSE_ATTRIBUTE_ERR = 10;
+ p.INVALID_STATE_ERR = 11;
+ p.SYNTAX_ERR = 12;
+ p.INVALID_MODIFICATION_ERR = 13;
+ p.NAMESPACE_ERR = 14;
+ p.INVALID_ACCESS_ERR = 15;
+ p.VALIDATION_ERR = 16;
+ p.TYPE_MISMATCH_ERR = 17;
// set up externs
G_vmlCanvasManager = G_vmlCanvasManager_;
CanvasRenderingContext2D = CanvasRenderingContext2D_;
CanvasGradient = CanvasGradient_;
CanvasPattern = CanvasPattern_;
-
+ DOMException = DOMException_;
})();
} // if
diff --git a/silverlight/excanvas.js b/silverlight/excanvas.js
new file mode 100644
index 0000000..2502f4e
--- /dev/null
+++ b/silverlight/excanvas.js
@@ -0,0 +1,872 @@
+// Copyright 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// Known Issues: (From VML version)
+//
+// * Patterns are not implemented.
+// * Radial gradient are not implemented. The VML version of these look very
+// different from the canvas one.
+// * Coordsize. The width and height attribute have higher priority than the
+// width and height style values which isn't correct.
+// * Painting mode isn't implemented.
+// * Canvas width/height should is using content-box by default. IE in
+// Quirks mode will draw the canvas using border-box. Either change your
+// doctype to HTML5
+// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
+// or use Box Sizing Behavior from WebFX
+// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
+// * Optimize. There is always room for speed improvements.
+
+//Known Issues: Silverlight version
+//
+// * Doing a transformation during a path (ie lineTo, transform, lineTo) will
+// not work corerctly because the transform is done to the whole path (ie
+// transform, lineTo, lineTo)
+// * Patterns are not yet implemented.
+
+
+// only add this code if we do not already have a canvas implementation
+if (!window.CanvasRenderingContext2D) {
+
+(function () {
+
+ var xamlId;
+
+ var G_vmlCanvasManager_ = {
+ init: function (opt_doc) {
+ var doc = opt_doc || document;
+ // Create a dummy element so that IE will allow canvas elements to be
+ // recognized.
+ doc.createElement('canvas');
+ if (/MSIE/.test(navigator.userAgent) && !window.opera) {
+ var self = this;
+
+ createXamlScriptTag();
+
+ doc.attachEvent('onreadystatechange', function () {
+ self.init_(doc);
+ });
+ }
+ },
+
+ init_: function (doc) {
+ // setup default css
+ var ss = doc.createStyleSheet();
+ ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
+ // default size is 300x150 in Gecko and Opera
+ 'text-align:left;width:300px;height:150px}' +
+ 'canvas *{width:100%;height:100%;border:0;' +
+ 'background:transparen;margin:0}' +
+ 'canvas div {position:relative}' +
+ // Place a div on top of the plugin.
+ 'canvas div div{position:absolute;top:0;' +
+ // needs to be "non transparent"
+ 'filter:alpha(opacity=0);background:red}';
+
+ // find all canvas elements
+ var els = doc.getElementsByTagName('canvas');
+ for (var i = 0; i < els.length; i++) {
+ if (!els[i].getContext) {
+ this.initElement(els[i]);
+ }
+ }
+ },
+
+
+ /**
+ * Public initializes a canvas element so that it can be used as canvas
+ * element from now on. This is called automatically before the page is
+ * loaded but if you are creating elements using createElement you need to
+ * make sure this is called on the element.
+ * @param {HTMLElement} el The canvas element to initialize.
+ * @return {HTMLElement} the element that was created.
+ */
+ initElement: function (el) {
+ el.getContext = function () {
+ if (this.context_) {
+ return this.context_;
+ }
+ return this.context_ = new CanvasRenderingContext2D_(this);
+ };
+
+ var attrs = el.attributes;
+ if (attrs.width && attrs.width.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setWidth_(attrs.width.nodeValue);
+ el.style.width = attrs.width.nodeValue + 'px';
+ } else {
+ el.width = el.clientWidth;
+ }
+ if (attrs.height && attrs.height.specified) {
+ // TODO: use runtimeStyle and coordsize
+ // el.getContext().setHeight_(attrs.height.nodeValue);
+ el.style.height = attrs.height.nodeValue + 'px';
+ } else {
+ el.height = el.clientHeight;
+ }
+
+ // insert object tag
+ el.innerHTML = getObjectHtml();
+
+ // do not use inline function because that will leak memory
+ el.attachEvent('onpropertychange', onPropertyChange);
+ return el;
+ }
+ };
+
+ function onPropertyChange(e) {
+ var el = e.srcElement;
+
+ switch (e.propertyName) {
+ case 'width':
+ el.style.width = el.attributes.width.nodeValue + 'px';
+ el.getContext().clearRect();
+ break;
+ case 'height':
+ el.style.height = el.attributes.height.nodeValue + 'px';
+ el.getContext().clearRect();
+ break;
+ }
+ }
+
+ G_vmlCanvasManager_.init();
+
+ function createXamlScriptTag() {
+ // This script tag contains the boilerplate XAML.
+ document.write('<script type=text/xaml>' +
+ '<Canvas x:Name="root" ' +
+ 'xmlns="http://schemas.microsoft.com/client/2007" ' +
+ 'xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ' +
+ 'Width="300" ' +
+ 'Height="150" ' +
+ 'Background="Transparent"> ' +
+ '</Canvas>' +
+ '</script>');
+ // Find the id of the writtenscript file.
+ var scripts = document.scripts;
+ var script = scripts[scripts.length - 1];
+ xamlId = script.uniqueID;
+ script.id = xamlId;
+ }
+
+ function getObjectHtml(fn) {
+ return '<div><object type="application/x-silverlight" >' +
+ '<param name="windowless" value="true">' +
+ '<param name="background" value="transparent">' +
+ '<param name="source" value="#' + xamlId + '">' +
+ '</object><div></div></div>';
+ }
+
+ function hasSilverlight() {
+ try {
+ new ActiveXObject('AgControl.AgControl');
+ return true;
+ } catch(_) {
+ return false;
+ }
+ }
+
+ // precompute "00" to "FF"
+ var dec2hex = [];
+ for (var i = 0; i < 16; i++) {
+ for (var j = 0; j < 16; j++) {
+ dec2hex[i * 16 + j] = i.toString(16) + j.toString(16);
+ }
+ }
+
+ function createMatrixIdentity() {
+ return [
+ [1, 0, 0],
+ [0, 1, 0],
+ [0, 0, 1]
+ ];
+ }
+
+ function matrixMultiply(m1, m2) {
+ var result = createMatrixIdentity();
+
+ for (var x = 0; x < 3; x++) {
+ for (var y = 0; y < 3; y++) {
+ var sum = 0;
+
+ for (var z = 0; z < 3; z++) {
+ sum += m1[x][z] * m2[z][y];
+ }
+
+ result[x][y] = sum;
+ }
+ }
+ return result;
+ }
+
+ function doTransform(ctx) {
+ transformObject(ctx, getRoot(ctx), ctx.m_);
+ }
+
+ function transformObject(ctx, obj, m) {
+ var transform = obj.renderTransform;
+ var matrix;
+ if (!transform) {
+ transform = create(ctx, '<MatrixTransform/>');
+ matrix = create(ctx, '<Matrix/>');
+ transform.matrix = matrix;
+ obj.renderTransform = transform;
+ } else {
+ matrix = transform.matrix;
+ }
+
+ matrix.m11 = m[0][0];
+ matrix.m12 = m[0][1];
+ matrix.m21 = m[1][0];
+ matrix.m22 = m[1][1];
+ matrix.offsetX = m[2][0];
+ matrix.offsetY = m[2][1];
+ }
+
+ function copyState(o1, o2) {
+ o2.fillStyle = o1.fillStyle;
+ o2.lineCap = o1.lineCap;
+ o2.lineJoin = o1.lineJoin;
+ o2.lineWidth = o1.lineWidth;
+ o2.miterLimit = o1.miterLimit;
+ o2.shadowBlur = o1.shadowBlur;
+ o2.shadowColor = o1.shadowColor;
+ o2.shadowOffsetX = o1.shadowOffsetX;
+ o2.shadowOffsetY = o1.shadowOffsetY;
+ o2.strokeStyle = o1.strokeStyle;
+ o2.globalAlpha = o1.globalAlpha;
+ o2.arcScaleX_ = o1.arcScaleX_;
+ o2.arcScaleY_ = o1.arcScaleY_;
+ }
+
+ // precompute "00" to "FF"
+ var decToHex = [];
+ for (var i = 0; i < 16; i++) {
+ for (var j = 0; j < 16; j++) {
+ decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
+ }
+ }
+
+ // Silverlight does not support spelling gray as grey.
+ var colorData = {
+ darkgrey: '#A9A9A9',
+ darkslategrey: '#2F4F4F',
+ dimgrey: '#696969',
+ grey: '#808080',
+ lightgrey: '#D3D3D3',
+ lightslategrey: '#778899',
+ slategrey: '#708090'
+ };
+
+
+ function getRgbHslContent(styleString) {
+ var start = styleString.indexOf('(', 3);
+ var end = styleString.indexOf(')', start + 1);
+ var parts = styleString.substring(start + 1, end).split(',');
+ // add alpha if needed
+ if (parts.length == 4 && styleString.substr(3, 1) == 'a') {
+ alpha = +parts[3];
+ } else {
+ parts[3] = 1;
+ }
+ return parts;
+ }
+
+ function percent(s) {
+ return parseFloat(s) / 100;
+ }
+
+ function clamp(v, min, max) {
+ return Math.min(max, Math.max(min, v));
+ }
+
+ function hslToRgb(parts){
+ var r, g, b;
+ h = parseFloat(parts[0]) / 360 % 360;
+ if (h < 0)
+ h++;
+ s = clamp(percent(parts[1]), 0, 1);
+ l = clamp(percent(parts[2]), 0, 1);
+ if (s == 0) {
+ r = g = b = l; // achromatic
+ } else {
+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+ var p = 2 * l - q;
+ r = hueToRgb(p, q, h + 1 / 3);
+ g = hueToRgb(p, q, h);
+ b = hueToRgb(p, q, h - 1 / 3);
+ }
+
+ return decToHex[Math.floor(r * 255)] +
+ decToHex[Math.floor(g * 255)] +
+ decToHex[Math.floor(b * 255)];
+ }
+
+ function hueToRgb(m1, m2, h) {
+ if (h < 0)
+ h++;
+ if (h > 1)
+ h--;
+
+ if (6 * h < 1)
+ return m1 + (m2 - m1) * 6 * h;
+ else if (2 * h < 1)
+ return m2;
+ else if (3 * h < 2)
+ return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+ else
+ return m1;
+ }
+
+ function translateColor(styleString) {
+ var str, alpha = 1;
+
+ styleString = String(styleString);
+ if (styleString.charAt(0) == '#') {
+ return styleString;
+ } else if (/^rgb/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ var str = '', n;
+ for (var i = 0; i < 3; i++) {
+ if (parts[i].indexOf('%') != -1) {
+ n = Math.floor(percent(parts[i]) * 255);
+ } else {
+ n = +parts[i];
+ }
+ str += decToHex[clamp(n, 0, 255)];
+ }
+ alpha = parts[3];
+ } else if (/^hsl/.test(styleString)) {
+ var parts = getRgbHslContent(styleString);
+ str = hslToRgb(parts);
+ alpha = parts[3];
+ } else if (styleString in colorData) {
+ return colorData[styleString];
+ } else {
+ return styleString;
+ }
+ return '#' + dec2hex[Math.floor(alpha * 255)] + str;
+ }
+
+ function processLineCap(lineCap) {
+ switch (lineCap) {
+ case 'butt':
+ return 'flat';
+ case 'round':
+ return 'round';
+ case 'square':
+ default:
+ return 'square';
+ }
+ }
+
+ function getRoot(ctx) {
+ return ctx.canvas.firstChild.firstChild.content.findName('root');
+ }
+
+ function create(ctx, s, opt_args) {
+ if (opt_args) {
+ s = s.replace(/\%(\d+)/g, function(match, index) {
+ return opt_args[+index - 1];
+ });
+ }
+
+ try {
+ return ctx.canvas.firstChild.firstChild.content.createFromXaml(s);
+ } catch (ex) {
+ throw Error('Could not create XAML from: ' + s);
+ }
+ }
+
+ function drawShape(ctx, s, opt_args) {
+ var canvas = ctx.lastCanvas_ || create(ctx, '<Canvas/>');
+ var shape = create(ctx, s, opt_args);
+ canvas.children.add(shape);
+ transformObject(ctx, canvas, ctx.m_);
+ if (!ctx.lastCanvas_) {
+ getRoot(ctx).children.add(canvas);
+ ctx.lastCanvas_ = canvas;
+ }
+ return shape;
+ }
+
+ function createBrushObject(ctx, value) {
+ if (value instanceof CanvasGradient_) {
+ return value.createBrush_(ctx);
+ } else if (value instanceof CanvasPattern_) {
+ throw Error('Not implemented');
+ } else {
+ return create(ctx, '<SolidColorBrush Color="%1"/>',
+ [translateColor(value)]);
+ }
+ }
+
+ /**
+ * This class implements CanvasRenderingContext2D interface as described by
+ * the WHATWG.
+ * @param {HTMLElement} surfaceElement The element that the 2D context should
+ * be associated with
+ */
+ function CanvasRenderingContext2D_(surfaceElement) {
+ this.m_ = createMatrixIdentity();
+ this.lastCanvas_ = null;
+
+ this.mStack_ = [];
+ this.aStack_ = [];
+ this.currentPath_ = [];
+
+ // Canvas context properties
+ this.strokeStyle = '#000';
+ this.fillStyle = '#000';
+
+ this.lineWidth = 1;
+ this.lineJoin = 'miter';
+ this.lineCap = 'butt';
+ this.miterLimit = 10;
+ this.globalAlpha = 1;
+ this.canvas = surfaceElement;
+ };
+
+
+ var contextPrototype = CanvasRenderingContext2D_.prototype;
+
+ contextPrototype.clearRect = function() {
+ var root = getRoot(this);
+ root.children.clear();
+
+ // TODO: Implement
+ this.currentPath_ = [];
+ this.lastCanvas_ = null;
+
+ };
+
+ contextPrototype.beginPath = function() {
+ // TODO: Branch current matrix so that save/restore has no effect
+ // as per safari docs.
+
+ this.currentPath_ = [];
+ };
+
+ contextPrototype.moveTo = function(aX, aY) {
+ this.currentPath_.push('M' + aX + ',' + aY);
+ };
+
+ contextPrototype.lineTo = function(aX, aY) {
+ if (this.currentPath_.length == 0) return;
+ this.currentPath_.push('L' + aX + ',' + aY);
+ };
+
+ contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
+ aCP2x, aCP2y,
+ aX, aY) {
+ if (this.currentPath_.length == 0) return;
+ this.currentPath_.push('C' + aCP1x + ',' + aCP1y + ' ' +
+ aCP2x + ',' + aCP2y + ' ' +
+ aX + ' ' + aY);
+ };
+
+ contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
+ if (this.currentPath_.length == 0) return;
+ this.currentPath_.push('Q' + aCPx + ',' + aCPy + ' ' +
+ aX + ',' + aY);
+ };
+
+ contextPrototype.arcTo = function(x1, y1, x2, y2, radius) {
+ if (this.currentPath_.length == 0) return;
+ // TODO: Implement
+ };
+
+ contextPrototype.arc = function(aX, aY, aRadius,
+ aStartAngle, aEndAngle, aClockwise) {
+ var deltaAngle = Math.abs(aStartAngle - aEndAngle);
+ // If start and stop are the same WebKit and Moz does nothing
+ if (aStartAngle == aEndAngle) {
+ // different browsers behave differently here so we do the easiest thing
+ return;
+ }
+
+ var endX = aX + aRadius * Math.cos(aEndAngle);
+ var endY = aY + aRadius * Math.sin(aEndAngle);
+
+ if (deltaAngle >= 2 * Math.PI) {
+ // if larger than 2PI
+ this.arc(aX, aY, aRadius, aStartAngle, aStartAngle + Math.PI, aClockwise);
+ this.arc(aX, aY, aRadius, aStartAngle + Math.PI,
+ aStartAngle + 2 * Math.PI, aClockwise);
+ // now move to end point
+ this.moveTo(endX, endY);
+ return;
+ }
+
+ var startX = aX + aRadius * Math.cos(aStartAngle);
+ var startY = aY + aRadius * Math.sin(aStartAngle);
+ var rotationAngle = deltaAngle * 180 / Math.PI; // sign, abs?
+ var sweepDirection = aClockwise ? 0 : 1;
+ var isLargeArc = rotationAngle >= 180 == Boolean(aClockwise) ? 0 : 1;
+
+ if (this.currentPath_.length != 0) {
+ // add line to start point
+ this.lineTo(startX, startY);
+ } else {
+ this.moveTo(startX, startY);
+ }
+
+ this.currentPath_.push('A' + aRadius + ',' + aRadius + ' ' +
+ rotationAngle + ' ' +
+ isLargeArc + ' ' +
+ sweepDirection + ' ' +
+ endX + ',' + endY);
+ };
+
+ contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
+ this.moveTo(aX, aY);
+ this.lineTo(aX + aWidth, aY);
+ this.lineTo(aX + aWidth, aY + aHeight);
+ this.lineTo(aX, aY + aHeight);
+ this.closePath();
+ };
+
+ contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
+ // Will destroy any existing path (same as FF behaviour)
+ this.beginPath();
+ this.moveTo(aX, aY);
+ this.lineTo(aX + aWidth, aY);
+ this.lineTo(aX + aWidth, aY + aHeight);
+ this.lineTo(aX, aY + aHeight);
+ this.closePath();
+ this.stroke();
+ this.currentPath_ = [];
+ };
+
+ contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
+ // Will destroy any existing path (same as FF behaviour)
+ this.beginPath();
+ this.moveTo(aX, aY);
+ this.lineTo(aX + aWidth, aY);
+ this.lineTo(aX + aWidth, aY + aHeight);
+ this.lineTo(aX, aY + aHeight);
+ this.closePath();
+ this.fill();
+ this.currentPath_ = [];
+ };
+
+ contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
+ return new LinearCanvasGradient_(aX0, aY0, aX1, aY1);
+ };
+
+ contextPrototype.createRadialGradient = function(x0, y0,
+ r0, x1,
+ y1, r1) {
+ return new RadialCanvasGradient_(x0, y0, r0, x1, y1, r1);
+ };
+
+ contextPrototype.drawImage = function (image, var_args) {
+ var dx, dy, dw, dh, sx, sy, sw, sh;
+
+ // For Silverlight we don't need to get the size of the image since
+ // Silverlight uses the image original dimension if not provided.
+
+ if (arguments.length == 3) {
+ dx = arguments[1];
+ dy = arguments[2];
+ // Keep sx, sy, sw, dw, sh and dh undefined
+ } else if (arguments.length == 5) {
+ dx = arguments[1];
+ dy = arguments[2];
+ dw = arguments[3];
+ dh = arguments[4];
+ // Keep sx, sy, sw and sh undefined
+ } else if (arguments.length == 9) {
+ sx = arguments[1];
+ sy = arguments[2];
+ sw = arguments[3];
+ sh = arguments[4];
+ dx = arguments[5];
+ dy = arguments[6];
+ dw = arguments[7];
+ dh = arguments[8];
+ } else {
+ throw Error('Invalid number of arguments');
+ }
+
+ var slImage;
+
+ // If we have a source rect we need to clip the image.
+ if (arguments.length == 9) {
+ slImage = drawShape(this, '<Image Source="%1"/>', [image.src]);
+
+ var clipRect = create(this,
+ '<RectangleGeometry Rect="%1,%2,%3,%4"/>', [sx, sy, sw, sh]);
+ slImage.clip = clipRect;
+
+ var m = createMatrixIdentity();
+
+ // translate to 0,0
+ m[2][0] = -sx;
+ m[2][1] = -sy;
+
+ // scale
+ var m2 = createMatrixIdentity();
+ m2[0][0] = dw / sw;
+ m2[1][1] = dh / sh;
+
+ m = matrixMultiply(m, m2);
+
+ // translate to destination
+ m[2][0] += dx;
+ m[2][1] += dy;
+
+ transformObject(this, slImage, m);
+
+ } else {
+ slImage = drawShape(this,
+ '<Image Source="%1" Canvas.Left="%2" Canvas.Top="%3"/>',
+ [image.src, dx, dy]);
+ if (dw != undefined || dh != undefined) {
+ slImage.width = dw;
+ slImage.height = dh;
+ slImage.stretch = 'fill';
+ }
+ }
+ };
+
+ contextPrototype.stroke = function() {
+ if (this.currentPath_.length == 0) return;
+ var path = drawShape(this, '<Path Data="%1"/>',
+ [this.currentPath_.join(' ')]);
+ path.stroke = createBrushObject(this, this.strokeStyle);
+ path.opacity = this.globalAlpha;
+ path.strokeThickness = this.lineWidth;
+ path.strokeMiterLimit = this.miterLimit;
+ path.strokeLineJoin = this.lineJoin;
+ // Canvas does not differentiate start from end
+ path.strokeEndLineCap = path.strokeStartLineCap =
+ processLineCap(this.lineCap);
+ };
+
+ contextPrototype.fill = function() {
+ if (this.currentPath_.length == 0) return;
+ var path = drawShape(this, '<Path Data="%1"/>',
+ [this.currentPath_.join(' ')]);
+ // The spec says to use non zero but Silverlight uses EvenOdd by defaul
+ path.data.fillRule = 'NonZero';
+ path.fill = createBrushObject(this, this.fillStyle);
+ path.fill.opacity = this.globalAlpha;
+ // TODO: What about even-odd etc?
+ };
+
+ contextPrototype.closePath = function() {
+ this.currentPath_.push('z');
+ };
+
+ /**
+ * Sets the transformation matrix and marks things as dirty
+ */
+ function setM(self, m) {
+ self.m_ = m;
+ self.lastCanvas_ = null;
+ };
+
+ contextPrototype.save = function() {
+ var o = {};
+ copyState(this, o);
+ this.aStack_.push(o);
+ this.mStack_.push(this.m_);
+ setM(this, matrixMultiply(createMatrixIdentity(), this.m_));
+ };
+
+ contextPrototype.restore = function() {
+ if (this.aStack_.length) {
+ copyState(this.aStack_.pop(), this);
+ this.m_ = this.mStack_.pop();
+ }
+ };
+
+ contextPrototype.translate = function(aX, aY) {
+ var m1 = [
+ [1, 0, 0],
+ [0, 1, 0],
+ [aX, aY, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_));
+ };
+
+ contextPrototype.rotate = function(aRot) {
+ var c = Math.cos(aRot);
+ var s = Math.sin(aRot);
+
+ var m1 = [
+ [c, s, 0],
+ [-s, c, 0],
+ [0, 0, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_));
+ };
+
+ contextPrototype.scale = function(aX, aY) {
+ var m1 = [
+ [aX, 0, 0],
+ [0, aY, 0],
+ [0, 0, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_));
+ };
+
+ contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
+ var m1 = [
+ [m11, m12, 0],
+ [m21, m22, 0],
+ [ dx, dy, 1]
+ ];
+
+ setM(this, matrixMultiply(m1, this.m_));
+ };
+
+ contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
+ setM(this, [
+ [m11, m12, 0],
+ [m21, m22, 0],
+ [ dx, dy, 1],
+ ]);
+ };
+
+ contextPrototype.clip = function() {
+ if (this.currentPath_.length) {
+ var clip = this.currentPath_.join(' ');
+ var canvas = create(this, '<Canvas Width="%1" Height="%2" Clip="%3"/>',
+ [getRoot(this).width, getRoot(this).height, clip]);
+ var parent = this.lastCanvas_ || getRoot(this);
+
+ parent.children.add(canvas);
+ this.lastCanvas_ = canvas;
+ }
+ };
+
+ contextPrototype.createPattern = function() {
+ return new CanvasPattern_;
+ };
+
+ // Gradient / Pattern Stubs
+ function CanvasGradient_() {
+ this.colors_ = [];
+ }
+
+ CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
+ aColor = translateColor(aColor);
+ this.colors_.push({offset: aOffset, color: aColor});
+ };
+
+ CanvasGradient_.prototype.createStops_ = function(ctx, brushObj, colors) {
+ var gradientStopCollection = brushObj.gradientStops;
+ for (var i = 0, c; c = colors[i]; i++) {
+ var color = translateColor(c.color);
+ gradientStopCollection.add(create(ctx,
+ '<GradientStop Color="%1" Offset="%2"/>', [color, c.offset]));
+ }
+ };
+
+ function LinearCanvasGradient_(x0, y0, x1, y1) {
+ CanvasGradient_.call(this);
+ this.x0_ = x0;
+ this.y0_ = y0;
+ this.x1_ = x1;
+ this.y1_ = y1;
+ }
+ LinearCanvasGradient_.prototype = new CanvasGradient_;
+
+ LinearCanvasGradient_.prototype.createBrush_ = function(ctx) {
+ var brushObj = create(ctx, '<LinearGradientBrush MappingMode="Absolute" ' +
+ 'StartPoint="%1,%2" EndPoint="%3,%4"/>',
+ [this.x0_, this.y0_, this.x1_, this.y1_]);
+ this.createStops_(ctx, brushObj, this.colors_);
+ return brushObj;
+ };
+
+ function isNanOrInfinite(v) {
+ return isNaN(v) || !isFinite(v);
+ }
+
+ function RadialCanvasGradient_(x0, y0, r0, x1, y1, r1) {
+ if (r0 < 0 || r1 < 0 || isNanOrInfinite(x0) || isNanOrInfinite(y0) ||
+ isNanOrInfinite(x1) || isNanOrInfinite(y1)) {
+ // IE does not support DOMException so this is as close as we get.
+ var error = Error('DOMException.INDEX_SIZE_ERR');
+ error.code = 1;
+ throw error;
+ }
+
+ CanvasGradient_.call(this);
+ this.x0_ = x0;
+ this.y0_ = y0;
+ this.r0_ = r0;
+ this.x1_ = x1;
+ this.y1_ = y1;
+ this.r1_ = r1;
+ }
+ RadialCanvasGradient_.prototype = new CanvasGradient_;
+
+ CanvasGradient_.prototype.createBrush_ = function(ctx) {
+ if (this.x0_ == this.x1_ && this.y0_ == this.y1_ && this.r0_ == this.r1_) {
+ return null;
+ }
+
+ var radius = Math.max(this.r0_, this.r1_);
+ var minRadius = Math.min(this.r0_, this.r1_);
+ var brushObj = create(ctx, '<RadialGradientBrush MappingMode="Absolute" ' +
+ 'GradientOrigin="%1,%2" Center="%3,%4" ' +
+ 'RadiusX="%5" RadiusY="%5"/>',
+ [this.x0_, this.y0_, this.x1_, this.y1_, radius]);
+
+ var colors = this.colors_.concat();
+
+ if (this.r1_ < this.r0_) {
+ // reverse color stop array
+ colors.reverse();
+ for (var i = 0, c; c = colors[i]; i++) {
+ c.offset = 1 - c.offset;
+ }
+ }
+
+ // sort the color stops
+ colors.sort(function(c1, c2) {
+ return c1.offset - c2.offset;
+ });
+
+ if (minRadius > 0) {
+ // We need to adjust the color stops since SL always have the inner radius
+ // at (0, 0) so we change the stops in case the min radius is not 0.
+ for (var i = 0, c; c = colors[i]; i++) {
+ c.offset = minRadius / radius + (radius - minRadius) / radius * c.offset;
+ }
+ }
+
+ this.createStops_(ctx, brushObj, colors);
+ return brushObj;
+ };
+
+ function CanvasPattern_() {}
+
+ // set up externs
+ G_vmlCanvasManager = G_vmlCanvasManager_;
+ CanvasRenderingContext2D = CanvasRenderingContext2D_;
+ CanvasGradient = CanvasGradient_;
+ CanvasPattern = CanvasPattern_;
+
+})();
+
+} // if
diff --git a/testcases/arc.html b/testcases/arc.html
index 287a78b..f2990fc 100644
--- a/testcases/arc.html
+++ b/testcases/arc.html
@@ -9,7 +9,7 @@ body {
}
</style>
-<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
diff --git a/testcases/clearpath.html b/testcases/clearpath.html
index f7de03b..6fffa54 100644
--- a/testcases/clearpath.html
+++ b/testcases/clearpath.html
@@ -9,7 +9,7 @@ body {
}
</style>
-<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
diff --git a/testcases/colors.html b/testcases/colors.html
new file mode 100644
index 0000000..503162b
--- /dev/null
+++ b/testcases/colors.html
@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Color Test</title>
+<style>
+
+#color {
+ position: fixed;
+ top: 0;
+ left: 250px;
+}
+</style>
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
+<script>
+
+var colors = [
+ 'aliceblue',
+ 'antiquewhite',
+ 'aqua',
+ 'aquamarine',
+ 'azure',
+ 'beige',
+ 'bisque',
+ 'black',
+ 'blanchedalmond',
+ 'blue',
+ 'blueviolet',
+ 'brown',
+ 'burlywood',
+ 'cadetblue',
+ 'chartreuse',
+ 'chocolate',
+ 'coral',
+ 'cornflowerblue',
+ 'cornsilk',
+ 'crimson',
+ 'cyan',
+ 'darkblue',
+ 'darkcyan',
+ 'darkgoldenrod',
+ 'darkgray',
+ 'darkgreen',
+ 'darkgrey',
+ 'darkkhaki',
+ 'darkmagenta',
+ 'darkolivegreen',
+ 'darkorange',
+ 'darkorchid',
+ 'darkred',
+ 'darksalmon',
+ 'darkseagreen',
+ 'darkslateblue',
+ 'darkslategray',
+ 'darkslategrey',
+ 'darkturquoise',
+ 'darkviolet',
+ 'deeppink',
+ 'deepskyblue',
+ 'dimgray',
+ 'dimgrey',
+ 'dodgerblue',
+ 'firebrick',
+ 'floralwhite',
+ 'forestgreen',
+ 'fuchsia',
+ 'gainsboro',
+ 'ghostwhite',
+ 'gold',
+ 'goldenrod',
+ 'gray',
+ 'grey',
+ 'green',
+ 'greenyellow',
+ 'honeydew',
+ 'hotpink',
+ 'indianred',
+ 'indigo',
+ 'ivory',
+ 'khaki',
+ 'lavender',
+ 'lavenderblush',
+ 'lawngreen',
+ 'lemonchiffon',
+ 'lightblue',
+ 'lightcoral',
+ 'lightcyan',
+ 'lightgoldenrodyellow',
+ 'lightgreen',
+ 'lightgrey',
+ 'lightpink',
+ 'lightsalmon',
+ 'lightseagreen',
+ 'lightskyblue',
+ 'lightslategray',
+ 'lightslategrey',
+ 'lightsteelblue',
+ 'lightyellow',
+ 'lime',
+ 'limegreen',
+ 'linen',
+ 'magenta',
+ 'maroon',
+ 'mediumaquamarine',
+ 'mediumblue',
+ 'mediumorchid',
+ 'mediumpurple',
+ 'mediumseagreen',
+ 'mediumslateblue',
+ 'mediumspringgreen',
+ 'mediumturquoise',
+ 'mediumvioletred',
+ 'midnightblue',
+ 'mintcream',
+ 'mistyrose',
+ 'moccasin',
+ 'navajowhite',
+ 'navy',
+ 'oldlace',
+ 'olive',
+ 'olivedrab',
+ 'orange',
+ 'orangered',
+ 'orchid',
+ 'palegoldenrod',
+ 'palegreen',
+ 'paleturquoise',
+ 'palevioletred',
+ 'papayawhip',
+ 'peachpuff',
+ 'peru',
+ 'pink',
+ 'plum',
+ 'powderblue',
+ 'purple',
+ 'red',
+ 'rosybrown',
+ 'royalblue',
+ 'saddlebrown',
+ 'salmon',
+ 'sandybrown',
+ 'seagreen',
+ 'seashell',
+ 'sienna',
+ 'silver',
+ 'skyblue',
+ 'slateblue',
+ 'slategray',
+ 'slategrey',
+ 'snow',
+ 'springgreen',
+ 'steelblue',
+ 'tan',
+ 'teal',
+ 'thistle',
+ 'tomato',
+ 'turquoise',
+ 'violet',
+ 'wheat',
+ 'white',
+ 'whitesmoke',
+ 'yellow',
+ 'yellowgreen'
+];
+
+function drawNamedColors() {
+ var el = document.getElementById('named');
+ var ctx = el.getContext('2d');
+
+ for (var i = 0; i < colors.length; i++) {
+ ctx.fillStyle = colors[i];
+ ctx.fillRect(0, i * 5, 100, 5);
+ }
+}
+
+function drawRgbColors() {
+ var el = document.getElementById('rgb');
+ var ctx = el.getContext('2d');
+
+ for (var y = 0; y < 100; y += 5) {
+ for (var x = 0; x < 100; x += 5) {
+ ctx.fillStyle = 'rgb(0%, ' + x + '%, ' + y + '%)';
+ ctx.fillRect(x, y, 10, 10);
+ }
+ }
+
+ ctx.translate(0, 100);
+
+ for (var y = 0; y < 100; y += 5) {
+ for (var x = 0; x < 100; x += 5) {
+ ctx.fillStyle = 'rgb(' + x + '%, 0%, ' + y + '%)';
+ ctx.fillRect(x, y, 10, 10);
+ }
+ }
+
+ ctx.translate(0, 100);
+
+ for (var y = 0; y < 100; y += 5) {
+ for (var x = 0; x < 100; x += 5) {
+ ctx.fillStyle = 'rgb(' + x + '%, ' + y + '%, 0%)';
+ ctx.fillRect(x, y, 10, 10);
+ }
+ }
+}
+
+function drawHslColors() {
+ var el = document.getElementById('hsl');
+ var ctx = el.getContext('2d');
+
+ for (var y = 0; y < 100; y += 5) {
+ for (var x = 0; x < 100; x += 5) {
+ ctx.fillStyle = 'hsl(0, ' + x + '%, ' + y + '%)';
+ ctx.fillRect(0 + x, y, 10, 10);
+ }
+ }
+
+ ctx.translate(0, 100);
+
+ for (var y = 0; y < 100; y += 5) {
+ for (var x = 0; x < 360; x += 18) {
+ ctx.fillStyle = 'hsl(' + x + ',50%, ' + y + '%)';
+ ctx.fillRect(x / 3.6, y, 10, 10);
+ }
+ }
+
+ ctx.translate(0, 100);
+
+ for (var y = 0; y < 100; y += 5) {
+ for (var x = 0; x < 360; x += 18) {
+ ctx.fillStyle = 'hsl(' + x + ', ' + y + '%, 50%)';
+ ctx.fillRect(x / 3.6, y, 10, 10);
+ }
+ }
+
+ ctx.save();
+ ctx.translate(50, 200);
+
+ for (var r = 0; r < 45; r += 5) {
+ for (var a = 0; a < 360; a += 18) {
+ ctx.save();
+
+ ctx.rotate(a * Math.PI / 180);
+ ctx.translate(0, r);
+ ctx.fillStyle = 'hsl(' + a + ', 100%, ' + r + '%)';
+ var w = Math.max(5, r / 3);
+ ctx.fillRect(-w / 2, -w / 2, w, w);
+
+ ctx.restore();
+ }
+ }
+
+ ctx.restore();
+}
+
+window.onload = function() {
+ drawNamedColors();
+ drawRgbColors();
+ drawHslColors();
+};
+
+</script>
+</head>
+<body>
+
+<canvas id=named width=100 height=730></canvas>
+<canvas id=rgb width=100 height=730></canvas>
+<canvas id=hsl width=100 height=730></canvas>
+<div id=color></div>
+
+
+
+</body>
+</html>
diff --git a/testcases/draw-image-flip.html b/testcases/draw-image-flip.html
new file mode 100644
index 0000000..14ef116
--- /dev/null
+++ b/testcases/draw-image-flip.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Scale and translate image test</title>
+<style>
+
+body {
+ text-align: center
+}
+
+</style>
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
+<script>
+
+function draw() {
+ var ctx = document.getElementById('c').getContext('2d');
+ var s = .25;
+ var w = 608 / 2;
+ var h = 380 / 2;
+
+ ctx.save();
+ ctx.translate(w, 0);
+ ctx.scale(s, s);
+ ctx.drawImage(img, 0, 0, w / s, h / s);
+ ctx.restore();
+
+ ctx.save();
+ ctx.translate(w, 0);
+ ctx.scale(-s, s);
+ ctx.drawImage(img, 0, 0, w / s, h / s);
+ ctx.restore();
+
+ ctx.save();
+ ctx.translate(w, 2 * h);
+ ctx.scale(s, -s);
+ ctx.drawImage(img, 0, 0, w / s, h / s);
+ ctx.restore();
+
+ ctx.save();
+ ctx.translate(w, 2 * h);
+ ctx.scale(-s, -s);
+ ctx.drawImage(img, 0, 0, w / s, h / s);
+ ctx.restore();
+};
+
+var img = new Image;
+img.onload = draw;
+window.onload = function() {
+ img.src = '../examples/ff.jpg';
+};
+
+</script>
+</head>
+<body>
+
+<canvas id=c width=608 height=380></canvas>
+
+</body>
+</html>
diff --git a/testcases/drawimage.html b/testcases/drawimage.html
index 546c3ef..741cd15 100644
--- a/testcases/drawimage.html
+++ b/testcases/drawimage.html
@@ -9,7 +9,7 @@ body {
}
</style>
-<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
diff --git a/testcases/gradient.html b/testcases/gradient.html
index a88eab5..a7908a6 100644
--- a/testcases/gradient.html
+++ b/testcases/gradient.html
@@ -9,7 +9,7 @@ body {
}
</style>
-<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
diff --git a/testcases/gradient2.html b/testcases/gradient2.html
index eefb563..8ce2383 100644
--- a/testcases/gradient2.html
+++ b/testcases/gradient2.html
@@ -5,11 +5,12 @@
<style>
body {
- text-align: center
+ text-align: center;
+ background: pink
}
</style>
-<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
diff --git a/testcases/linewidth.html b/testcases/linewidth.html
index 9dc1d5b..c02db98 100644
--- a/testcases/linewidth.html
+++ b/testcases/linewidth.html
@@ -9,7 +9,7 @@ body {
}
</style>
-<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
@@ -44,4 +44,4 @@ window.onload = function() {
using sub pixel coordinates.</p>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/testcases/overflow.html b/testcases/overflow.html
index 8f11d9d..cd204b5 100644
--- a/testcases/overflow.html
+++ b/testcases/overflow.html
@@ -1,37 +1,37 @@
-<!DOCTYPE html>
-<html>
-<head>
-<title>Overflow Test</title>
-<style>
-
-body {
- text-align: center
-}
-
-</style>
-<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
-<script>
-
-window.onload = function() {
- var ctx = document.getElementById('c').getContext('2d');
-
- ctx.fillStyle = 'blue';
- ctx.fillRect(-50, -50, 100, 100);
-
- ctx.fillStyle = 'green';
- ctx.fillRect(50, 50, 100, 100);
-
- ctx.strokeStyle = 'black';
- ctx.strokeRect(0, 0, 100, 100);
-};
-
-</script>
-</head>
-<body>
-
-<canvas id=c width=100 height=100></canvas>
-
-<p>This tests if content gets cropped if painting outside the canvas.</p>
-
-</body>
-</html>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+<title>Overflow Test</title>
+<style>
+
+body {
+ text-align: center
+}
+
+</style>
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
+<script>
+
+window.onload = function() {
+ var ctx = document.getElementById('c').getContext('2d');
+
+ ctx.fillStyle = 'blue';
+ ctx.fillRect(-50, -50, 100, 100);
+
+ ctx.fillStyle = 'green';
+ ctx.fillRect(50, 50, 100, 100);
+
+ ctx.strokeStyle = 'black';
+ ctx.strokeRect(0, 0, 100, 100);
+};
+
+</script>
+</head>
+<body>
+
+<canvas id=c width=100 height=100></canvas>
+
+<p>This tests if content gets cropped if painting outside the canvas.</p>
+
+</body>
+</html>
diff --git a/testcases/overlay.html b/testcases/overlay.html
new file mode 100644
index 0000000..cae5572
--- /dev/null
+++ b/testcases/overlay.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Overlay animation</title>
+<style>
+
+</style>
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
+<script>
+
+Date.now = Date.now || function() {
+ return new Date().getTime();
+};
+
+var points = [];
+var startTime = Date.now();
+
+function addPointAtEvent(e) {
+ var x = e.offsetX || e.layerX;
+ var y = e.offsetY || e.layerY;
+ if (!isNaN(x) && !isNaN(y)) {
+ points.push([x, y, Date.now()]);
+ }
+ if (points.length == 1) {
+ draw();
+ }
+}
+
+var AGE_TO_LIVE = 1500;
+
+function draw() {
+
+ var ctx = document.getElementById('c').getContext('2d');
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+ var now = Date.now();
+ var itemsToRemove = 0;
+ for (var i = 0; i < points.length; i++) {
+ var x = points[i][0];
+ var y = points[i][1];
+ var createTime = points[i][2];
+ var age = now - createTime;
+
+ if (age > AGE_TO_LIVE) {
+ itemsToRemove++;
+ } else {
+ var d = (AGE_TO_LIVE - age) / AGE_TO_LIVE;
+ var r = d * 50;
+ var hue = (createTime - startTime) / 10 % 360;
+ ctx.fillStyle = 'hsl(' + hue + ',100%,50%)';
+ ctx.globalAlpha = .5 * d;
+ ctx.beginPath();
+ ctx.arc(x, y, r, 0, 2 * Math.PI, true);
+ ctx.fill();
+ ctx.closePath();
+ }
+ }
+
+ if (itemsToRemove) {
+ points = points.slice(itemsToRemove);
+ }
+
+ if (points.length) {
+ window.setTimeout(draw, 10);
+ }
+}
+
+window.onload = function() {
+ document.getElementById('c').onmousedown = function(e) {
+ addPointAtEvent(e || window.event);
+ };
+};
+
+</script>
+</head>
+<body>
+
+<canvas id=c width=500 height=500 onmousemove="addPointAtEvent(event)"></canvas>
+
+</body>
+</html>
diff --git a/testcases/pattern.html b/testcases/pattern.html
new file mode 100644
index 0000000..0bdc2a1
--- /dev/null
+++ b/testcases/pattern.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Pattern Test</title>
+<style>
+
+body {
+ text-align: center
+}
+
+</style>
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
+<script>
+
+var img;
+function draw() {
+ var ctx = document.getElementById('c').getContext('2d');
+ var p = ctx.createPattern(img, 'repeat');
+ ctx.translate(50, 50);
+ ctx.fillStyle = p;
+ ctx.fillRect(0, 0, 300, 300);
+}
+
+window.onload = function() {
+ img = new Image;
+ img.onload = function() {
+ draw();
+ };
+ img.src = 'pattern.jpg';
+};
+
+</script>
+</head>
+<body>
+
+<canvas id=c width=400 height=400></canvas>
+
+<p>This tests patterns</p>
+
+</body>
+</html>
diff --git a/testcases/pattern.jpg b/testcases/pattern.jpg
new file mode 100644
index 0000000..e6981ab
Binary files /dev/null and b/testcases/pattern.jpg differ
diff --git a/testcases/quadraticcurve.html b/testcases/quadraticcurve.html
index 6f324ee..84d3df3 100644
--- a/testcases/quadraticcurve.html
+++ b/testcases/quadraticcurve.html
@@ -9,7 +9,7 @@ body {
}
</style>
-<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
diff --git a/testcases/resizing.html b/testcases/resizing.html
index 66252c5..a7ead75 100644
--- a/testcases/resizing.html
+++ b/testcases/resizing.html
@@ -1,7 +1,7 @@
<html>
<head>
<title>ExplorerCanvas Text Case</title>
- <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
+ <!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>
// Safari is known not to handle resizing well, expect this to
// compare to Firefox
diff --git a/testcases/saverestorepath.html b/testcases/saverestorepath.html
index d2f0940..6dfd89f 100644
--- a/testcases/saverestorepath.html
+++ b/testcases/saverestorepath.html
@@ -9,7 +9,7 @@ body {
}
</style>
-<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
diff --git a/testcases/stroke-scale-rotate.html b/testcases/stroke-scale-rotate.html
index 8453108..b75e9d0 100644
--- a/testcases/stroke-scale-rotate.html
+++ b/testcases/stroke-scale-rotate.html
@@ -13,7 +13,7 @@ canvas {
}
</style>
-<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>
// draw a star
diff --git a/testcases/stroke-should-not-close-path.html b/testcases/stroke-should-not-close-path.html
index 551c28b..26f77d0 100644
--- a/testcases/stroke-should-not-close-path.html
+++ b/testcases/stroke-should-not-close-path.html
@@ -9,7 +9,7 @@ body {
}
</style>
-<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
diff --git a/testcases/text.html b/testcases/text.html
new file mode 100644
index 0000000..45de59e
--- /dev/null
+++ b/testcases/text.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Text Test</title>
+<style>
+
+
+</style>
+<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
+<script>
+
+window.onload = draw;
+
+
+function draw() {
+ var ctx = document.getElementById('c').getContext('2d');
+ ctx.save();
+ ctx.rotate(Math.PI / 4)
+ ctx.fillText('Hello World', 100, 100);
+ ctx.restore();
+}
+
+function value(id) {
+ return document.getElementById(id).value;
+}
+
+var v = 0;
+
+function draw() {
+ var text = value('text');
+ var font = value('font');
+ var textAlign = value('textAlign');
+ var textBaseline = value('textBaseline');
+ var scale = value('scale').split(',');
+ var scaleX = scale[0] || 1;
+ var scaleY = scale[1] || 1;
+
+ var ctx = document.getElementById('c').getContext('2d');
+ ctx.save();
+
+ ctx.font = font;
+ ctx.textAlign = textAlign;
+ ctx.textBaseline = textBaseline;
+ var g = ctx.createLinearGradient(0, 0, 0, 50);
+ g.addColorStop(0, '#d4f4f5');
+ g.addColorStop(0.4, '#d4f4f5');
+ g.addColorStop(0.6, '#c2d7c4');
+ g.addColorStop(1, '#c2d7c4');
+ ctx.fillStyle = g;
+
+ ctx.strokeStyle = '#92a3a4';
+
+ ctx.clearRect(0, 0, 500, 500);
+ ctx.translate(250, 250);
+ ctx.rotate(v);
+ ctx.scale(scaleX, scaleY);
+
+ ctx.strokeText(text, 0, 0);
+ ctx.fillText(text, 0, 0);
+
+ ctx.restore();
+
+ v += Math.PI / 100;
+}
+
+setInterval(draw, 50);
+
+
+</script>
+</head>
+<body>
+
+<canvas id=c width=500 height=500></canvas>
+
+<br><input type=text id=text value="Explorer Canvas">
+<br><input type=text id=font value="bold 35px 'courier new'">
+<br><input type=text id=textAlign value="center">
+<br><input type=text id=textBaseline value="middle">
+<br><input type=text id=scale value="1, 2.5"
+
+
+</body>
+</html>
Debdiff
[The following lists of changes regard files as different if they have different names, permissions or owners.]
Files in second set of .debs but not in first
-rw-r--r-- root/root /usr/share/doc/libjs-excanvas/examples/testcases/colors.html -rw-r--r-- root/root /usr/share/doc/libjs-excanvas/examples/testcases/draw-image-flip.html -rw-r--r-- root/root /usr/share/doc/libjs-excanvas/examples/testcases/overlay.html -rw-r--r-- root/root /usr/share/doc/libjs-excanvas/examples/testcases/pattern.html -rw-r--r-- root/root /usr/share/doc/libjs-excanvas/examples/testcases/pattern.jpg -rw-r--r-- root/root /usr/share/doc/libjs-excanvas/examples/testcases/text.html
No differences were encountered in the control files