is there way create diagonal gradient doing this? attempts give me vertical or horizontal
_canvas = document.getelementbyid('canvas'); _stage = _canvas.getcontext('2d'); var gradient = _stage.createlineargradient(0, 0, buttonendx, buttonendy); gradient.addcolorstop(0, "white"); gradient.addcolorstop(1, "blue");
your code should work fine. call context.fillrect() after setting context.fillstyle = gradient , buttonendx , buttonendy variables set meaningful values?
var buttonendx = 100, buttonendy = 100; _canvas = document.getelementbyid('canvas'); _stage = _canvas.getcontext('2d'); var gradient = _stage.createlineargradient(0, 0, buttonendx, buttonendy); gradient.addcolorstop(0, "white"); gradient.addcolorstop(1, "blue"); _stage.fillstyle = gradient; _stage.fillrect(10, 10, 200, 100);<canvas id="canvas" width="100" height="100"></canvas>the above code renders (chrome 48):
