Broken canvas transparent gradients

Not reproducible Issue #301237

Details

Created
Jun 9, 2014
Privacy
This issue is public.
Reports
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

Here is a minimum demonstration: It creates an initial canvas and everytime you click on the canvas it creates another new canvas, which should be identical since it’s using the very same code. But they aren’t.

function clickBlock() {
    var div = document.createElement('div');
    var width = 80;
    var height = 80;
    var canvas = document.createElement('

canvas’);
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
div.setAttribute("onclick","clickBlock()");
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = "#FFF000";
ctx.fillRect(0,0,width,height);
var gradient = ctx.createRadialGradient(width/2,height/2,height,width/3,height/3,height/4);
gradient.addColorStop(0,’rgba(0,0,0,1)');
gradient.addColorStop(1,’rgba(0,0,0,0)');
ctx.fillStyle = gradient;
ctx.arc(width/2,height/2,height,2*Math.PI,0,false);
ctx.fill();
div.appendChild(canvas);
document.body.appendChild(div);
}
clickBlock()

Expected Results:

The code I’m attaching below (in the “Steps to reproduce the problem” area) creates an initial canvas and everytime you click on the canvas it creates another new canvas, which should be identical since it’s using the very same code. But they aren’t.

Actual Results:

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Tony S.”

      Changed Assigned To from “Tony S.” to “Brian M.”

      Changed Assigned To from “Brian M.” to “IE F.”

      Changed Status to “Not reproducible”

    You need to sign in to your Microsoft account to add a comment.

    Sign in