[Webkit-unassigned] [Bug 197689] New: Text with a gradient and drop shadow does not display properly if the canvas context is scaled

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=197689

            Bug ID: 197689
           Summary: Text with a gradient and drop shadow does not display
                    properly if the canvas context is scaled
           Product: WebKit
           Version: Safari 11
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Canvas
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: themoonrat at gmail.com
                CC: dino at apple.com

Created attachment 369367

  --> https://bugs.webkit.org/attachment.cgi?id=369367&action=review

Comparing visuals to another browser

Seen on:
Safari 11.1.2on MacOS High Sierra 10.13.6
iPad Pro on 12.1.3
iPad Air on 12.x (can't remember exact version)
iPhone S8+ on 11.4.1

On an empty html page, as this script in the body

<script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext('2d');
        ctx.shadowColor = "#000000";
        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5
        ctx.shadowBlur = 10;
        ctx.font = "70px arial";
        var gradient = ctx.createLinearGradient(300, 0, 300, 100);
        gradient.addColorStop(0, '#FF0000');
        gradient.addColorStop(0.25, '#FF0000');
        gradient.addColorStop(0.5, '#00FF00');
        gradient.addColorStop(0.75, '#0000FF');
        gradient.addColorStop(1, '#0000FF');
        ctx.fillStyle = gradient;
        ctx.scale(0.75, 0.75);
        ctx.fillText("1234567890", 10, 70);
</script>

On every other browser / os combination I've tried, you get the correct visual you see at the top of my attachment. But on Safari for MacOS and iOS, the drop shadow appears incorrectly way above the text.

If you remove the gradient and use a simple fill style, the drop shadow will appear in the correct place.
If you keep the gradient but remove the ctx.scale line, the drop shadow will appear in the correct place.

It's the combination of both gradient and scale where things go wrong.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190508/3ce79ca3/attachment-0001.html>