canvas context property changes ignored (fillStyle, etc.) in polymer, dart2js in chrome

[DartBot]

This issue was originally filed by @hpoul

---

What steps will reproduce the problem?

1. create a polymer element with an embedded <canvas></canvas> tag
2. in dart code retrieve canvas: _canvas = this.getShadowRoot('...').querySelector('canvas'); and context: _context = _canvas.getContext('2d');
3. try to draw on canvas and change fillStyle, strokeStyle, etc.
4. run dart2js and view in chrome stable (30.0.1599.101) or safari

example:
    _context.beginPath();
    _context.clearRect(0, 0, _width, _height);
    _context.fillStyle = '#ffffff';
    _context.strokeStyle = 'rgb(255,0,0)';
    _context.lineWidth = 2;
    
    var circleRadius = 100;
    _context.arc(_width/2, _height/2, circleRadius, 0, degreeToRadians(360));

    _context.stroke();
    _context.fill();

What is the expected output? What do you see instead?

i expect white fill color, red stroke color - instead only a black circle is rendered.

What version of the product are you using? On what operating system?
the problem first appeared in dart/polymer 0.8.5 and reproduced in 0.8.7
it works in dartium with dart.. but after dart2js it doesn't work in chrome (stable) and safari, but it works in firefox..
(attached screenshot from left to right: dartium, chrome 30 (stable), firefox 24

Please provide any additional information below.

i've tried debugging a bit the generated dart2js in 0.8.5 but didn't get too far:
https://groups.google.com/a/dartlang.org/d/msg/web-ui/8YmGCAPBh14/pfAE22rIEaIJ

if this is not enough information i can create a running polymer element example if required..

---

Attachment:
dartium-chrome30-firefox.png (57.27 KB)

[floitschG]

Added Area-Polymer, Triaged labels.

[jmesserly]

This is a bug in ShadowDOM. We can try updating; otherwise we need to move it to github:
googlearchive/ShadowDOM#284
googlearchive/ShadowDOM#274

---

Added Library-ShadowDOM label.

[sethladd]

Yay, both of the PRs got merged!

This is a customer facing blocking issue. Maybe we can update our polyfills now that upstream is fixed?

[sigmundch]

John updated the polyfills yesterday. Can you try again with version 0.8.8?

---

Added NeedsInfo label.

[sethladd]

Awesome, great news :)

[DartBot]

This comment was originally written by @hpoul

---

i have just tried it with a continuous build (dart editor from http://gsdview.appspot.com/dart-editor-archive-continuous/latest/) but it's still showing the same issues..

$ dart-sdk/bin/dart --version
Dart VM version: 0.1.2.0_r29759 (Fri Nov 1 10:35:11 2013) on "macos_x64"

i've ran pub update which fetched polymer 0.8.10 and i'm compiling with:

void main() {
  lint()
    .then(() => deploy()).then(compileToJs);
}
compileToJs() {
  var dart2js = join(dirname(Platform.executable), 'dart2js');
  var result =
    Process.runSync(dart2js, [
        '-o', 'out/web/progresswheeltest_index.html_bootstrap.dart.js',
        'out/web/progresswheeltest_index.html_bootstrap.dart'], runInShell: true);
}

i'm pretty sure i've rebuilt everything with the latest versions.. am i missing something?

thanks

[DartBot]

This comment was originally written by @hpoul

---

OK, I just tried to reproduce it in polymer.js and had the same problem.. (i've downloaded the latest version from github and builded it with grunt..)

is there something like unwrap(...) in polymer.dart? Polymer/polymer#288
the following code works for me in javascript:
        unwrap(_context).fillStyle = '#ffffff';
        unwrap(_context).strokeStyle = 'rgb(255,0,0)';
        unwrap(_context).lineWidth = 2;

[sethladd]

Added Triaged label.

[jmesserly]

probably need this? googlearchive/ShadowDOM#298

[jmesserly]

Removed Priority-Unassigned label.
Added Priority-High label.

[DartBot]

This comment was originally written by @hpoul

---

Yep, googlearchive/ShadowDOM#298 looks good! just updated my local polymer.js checkout, and now it works for me in javascript without workarounds :) so another pull into dart should do the trick
thanks

[jmesserly]

Added this to the M9 milestone.

[DartBot]

This comment was originally written by andriy....@gmail.com

---

I am still facing this issue with latest dart editor.

[sigmundch]

FYI - change pulling in the fixes is now out for review: https://codereview.chromium.org/68113020/

---

Set owner to @sigmundch.
Added Started label.

[sigmundch]

I submitted the fix in r30282. It should be part of the next release of the shadow_dom package (likely next week)

---

Added Fixed label.

[clayberg]

Removed this from the M9 milestone.
Added this to the 1.1 milestone.

[DartBot]

This comment was originally written by andriy.kemin...@gmail.com

---

When i try to draw something on canvas nothing is displayed on IOS. Not sure if it's related with this issue or it'a a completely separate defect. Anyway i created a new one "Issue #15780".

[sethladd]

I, too, had an app where I couldn't draw on canvas on iOS. I never tracked it down, but maybe it's the same thing.

[anders-sandholm]

Removed Library-ShadowDOM label.
Added Pkg-ShadowDOM label.