context.createConicGradient is not a function

user_7630984 0
Viewed 697

I'm new to canvas, I was learning from MDN's Canvas tutorial's color gradient part, and when I wanted to run the context.createConicGradient browser throws error:

Uncaught TypeError: context.createConicGradient is not a function

I even copied the same code from the tutorial, but it throws this error anyway. I thought that this method was removed or deprecated from JS, but I didn't find anything reliable.

Here is the code from the tutorial:

  var conicGrad1 = ctx.createConicGradient(2, 62, 75);
  conicGrad1.addColorStop(0, '#A7D30C');
  conicGrad1.addColorStop(1, '#fff');
canvas javascript
2 Answers
user_24443860

Here is one helpful polyfill you can use: https://github.com/parksben/create-conical-gradient

import 'create-conical-gradient'; // If you use the npm package.

const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');

const gradient = ctx.createConicalGradient(240, 135, -Math.PI, Math.PI);

gradient.addColorStop(0, '#f00');
gradient.addColorStop(0.2, '#00f');
gradient.addColorStop(0.4, '#0ff');
gradient.addColorStop(0.6, '#f0f');
gradient.addColorStop(0.8, '#ff0');
gradient.addColorStop(1, '#f00');

ctx.fillStyle = gradient.pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);
user_137650740
Related