2

When LockerService is activated, it makes <canvas> element unusable.

And if I deactivate LockerService, it would display <canvas> in filled color.

Consider following code and actual result I'm getting with LockerService.

CanvasColorTest.cmp

<aura:component implements="force:appHostable" > <ltng:require styles="/resource/advpm__slds_v0110/assets/styles/salesforce-lightning-design-system-ltng.min.css" afterScriptsLoaded="{!c.performInit}" /> <canvas class="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> </aura:component>

CanvasColorTestController.js

({ performInit : function(component, event, helper) { var c = document.querySelector(".myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.rect(20, 20, 150, 100); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.rect(40, 40, 150, 100); ctx.fillStyle = "blue"; ctx.fill(); } })

Now, above code generates following output:

  • LockerService - Deactivated

enter image description here

  • LockerService - Activated

enter image description here

Is there any way I can get <canvas> element with color fill working in Lightning Components, with LockerService enabled?

Could this be a bug or just intentional from Salesforce Team?

I'm also seeing following JS Warning/Error in Chrome Developer Console:

aura_prod.js:456

'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead.

This particular Error Message also only appears when LockerService is activated in the org.

Improve this question

1 Answer 1

Reset to default
1

Possibly related to this bug: Can't set element.style.properties in JS inside Lightning Locker

Your code works fine on my sandbox with Locker enabled and I get the blue/red rectangles. I suspect this has to do with some of the object property bugs that were supposed to be fixed recently. Perhaps the fix has not rolled out to your org yet but it should get there eventually.

Improve this answer
5
  • Yes this is exactly the situation. This was fixed last week. Commented Jun 24, 2016 at 0:09
  • Thanks for the info Charles and Trevor. Is there any date on which can production and dev orgs have the fix deployed? I ve a broken lightning component in susbcriber org due this :-) Commented Jun 24, 2016 at 1:43
  • You should be able to disable Lightning Locker on any org. Certainly if you already have Lightning components in production you should not yet enable Locker until you have verified in sandboxes that Locker does not break your components. Commented Jun 24, 2016 at 13:12
  • I just wanted to add, I don't have a date for you as I don't work for SF but I can report that my sandbox is on the CS2 instance which has been upgraded to Summer '16 Patch 10. And it looks like all sandboxes are on Patch 10. So try this in a sandbox and hopefully you'll see that it's fixed too. In the meantime disable Locker in production and keep it off until you're satisfied it does not break anything else in production. Commented Jun 24, 2016 at 15:38
  • Looks like both production and sandboxes are now up to Patch 10.3. Commented Jun 28, 2016 at 20:34

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.