1

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.

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.

  • Yes this is exactly the situation. This was fixed last week. – TrevorBliss Jun 24 '16 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 :-) – VarunC Jun 24 '16 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. – Charles T Jun 24 '16 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. – Charles T Jun 24 '16 at 15:38
  • Looks like both production and sandboxes are now up to Patch 10.3. – Charles T Jun 28 '16 at 20:34

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.