toDataURL

[Spiros_N_]

Hi,

I toDataURL function supported on a canvas for a crosswalk deployment ?
Do I need plugin ?

this code:

var ctx = document.getElementById('avatarCanvas').getContext('2d');
ar img = new Image();
img.src = url;
img.onload = function () {
ctx.drawImage(img,0,0);
    
alert( ctx.toDataURL('image/png') );   

fails with "undefined" function

[Barry_Johnson]

Canvas.toDataURL works fine on Crosswalk. I use it three different places in my current project without difficulty. Are you saying your code works in the emulator or a webpage but not in your built app?

[Spiros_N_]

Barrett J. 
Thanks thanks for your reply.

I got Undefined is not a function in emulator. I haven't tried it in build app yet/

 

[Barry_Johnson]

Seems strange, as it (toDataURL) works fine in the emulator. I hate to ask, but are you sure your "sweetAlert" is defined globally? Or set a breakpoint the line before and inspect ctx to see what is there and in its prototype.

[Spiros_N_]

Yes the alert is defined.
 

This is it the ctx :

ctx: CanvasRenderingContext2D
canvas: canvas#avatarCanvas
fillStyle: "#000000"
font: "10px sans-serif"
globalAlpha: 1
globalCompositeOperation: "source-over"
imageSmoothingEnabled: true
lineCap: "butt"
lineDashOffset: 0
lineJoin: "miter"
lineWidth: 1
miterLimit: 10
shadowBlur: 0
shadowColor: "rgba(0, 0, 0, 0)"
shadowOffsetX: 0
shadowOffsetY: 0
strokeStyle: "#000000"
textAlign: "start"
textBaseline: "alphabetic"
webkitImageSmoothingEnabled: true
__proto__: CanvasRenderingContext2D
arc: function arc() { [native code] }
arcTo: function arcTo() { [native code] }
beginPath: function beginPath() { [native code] }
bezierCurveTo: function bezierCurveTo() { [native code] }
clearRect: function clearRect() { [native code] }
clearShadow: function clearShadow() { [native code] }
clip: function clip() { [native code] }
closePath: function closePath() { [native code] }
constructor: function CanvasRenderingContext2D() { [native code] }
createImageData: function createImageData() { [native code] }
createLinearGradient: function createLinearGradient() { [native code] }
createPattern: function createPattern() { [native code] }
createRadialGradient: function createRadialGradient() { [native code] }
drawFocusIfNeeded: function drawFocusIfNeeded() { [native code] }
drawImage: function drawImage() { [native code] }
drawImageFromRect: function drawImageFromRect() { [native code] }
ellipse: function ellipse() { [native code] }
fill: function fill() { [native code] }
fillRect: function fillRect() { [native code] }
fillText: function fillText() { [native code] }
getContextAttributes: function getContextAttributes() { [native code] }
getImageData: function getImageData() { [native code] }
getLineDash: function getLineDash() { [native code] }
isPointInPath: function isPointInPath() { [native code] }
isPointInStroke: function isPointInStroke() { [native code] }
lineTo: function lineTo() { [native code] }
measureText: function measureText() { [native code] }
moveTo: function moveTo() { [native code] }
putImageData: function putImageData() { [native code] }
quadraticCurveTo: function quadraticCurveTo() { [native code] }
rect: function rect() { [native code] }
resetTransform: function resetTransform() { [native code] }
restore: function restore() { [native code] }
rotate: function rotate() { [native code] }
save: function save() { [native code] }
scale: function scale() { [native code] }
setAlpha: function setAlpha() { [native code] }
setCompositeOperation: function setCompositeOperation() { [native code] }
setFillColor: function setFillColor() { [native code] }
setLineCap: function setLineCap() { [native code] }
setLineDash: function setLineDash() { [native code] }
setLineJoin: function setLineJoin() { [native code] }
setLineWidth: function setLineWidth() { [native code] }
setMiterLimit: function setMiterLimit() { [native code] }
setShadow: function setShadow() { [native code] }
setStrokeColor: function setStrokeColor() { [native code] }
setTransform: function setTransform() { [native code] }
stroke: function stroke() { [native code] }
strokeRect: function strokeRect() { [native code] }
strokeText: function strokeText() { [native code] }
transform: function transform() { [native code] }
translate: function translate() { [native code] }
__proto__: Object
__defineGetter__: function __defineGetter__() { [native code] }
__defineSetter__: function __defineSetter__() { [native code] }
__lookupGetter__: function __lookupGetter__() { [native code] }
__lookupSetter__: function __lookupSetter__() { [native code] }
constructor: function Object() { [native code] }
hasOwnProperty: function hasOwnProperty() { [native code] }
isPrototypeOf: function isPrototypeOf() { [native code] }
propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
toLocaleString: function toLocaleString() { [native code] }
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }
get __proto__: function __proto__() { [native code] }
set __proto__: function __proto__() { [native code] }

[Barry_Johnson]

Very strange. I have to try this myself. What device are you emulating, just so I make sure I try the same thing?

[Spiros_N_]

Google Nexus 4 is the emulation device.

Is there a possibility that I'm using a wrong cordova 3.x plugin ? 
What it the required plugin for the canvas ?

[Barry_Johnson · Accepted solution]

We are both going to feel pretty silly. :-)

The toDataURL function is attached to the canvas, not the context. I didn't even notice it myself until I looked at my code. Almost everything else with the canvas happens with the context.

[Spiros_N_]

OOOOps !

Yes Barrett this is it !
Thanks for your help!

[Barry_Johnson]

You are very welcome!