var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0,0); ctx.quadraticCurveTo(0,0,50,0); ctx.quadraticCurveTo(5,5,0,50); ctx.quadraticCurveTo(0,0,0,-50); ctx.strokeStyle = '#FF0000'; // Цвет обводки ctx.lineWidth = 3; // Ширина линии ctx.stroke();

This code will draw a corner rounded inside (looks like a triangle). How to fill this corner with a gradient?

    1 answer 1

    An example based on written at http://www.html5canvastutorials.com/tutorials/html5-canvas-linear-gradients/ :

     var grd = ctx.createLinearGradient(0, 0, 50, 50); grd.addColorStop(0, "#8ED6FF"); // light blue grd.addColorStop(1, "#004CB3"); // dark blue ctx.fillStyle = grd; ctx.fill();