jquery - Multiple canvas, reusable gradients -
i trying write dry code multiple canvas. applying gradients chartjs charts , don't want rewrite same gradient each chart instance.
var ctx1 = $("#softwarechart").get(0).getcontext("2d"); var ctx2 = $("#webchart").get(0).getcontext("2d"); var gradient1 = ctx1.createlineargradient(0, 0, 0, 400); gradient1.addcolorstop(0, '#ff9170'); gradient1.addcolorstop(1, '#ff3f05'); var gradient2 = ctx1.createlineargradient(0, 0, 0, 400); gradient3.addcolorstop(0, '#f5d147'); gradient3.addcolorstop(1, '#dfb30c'); var gradient1 = ctx2.createlineargradient(0, 0, 0, 400); gradient1.addcolorstop(0, '#ff9170'); gradient1.addcolorstop(1, '#ff3f05'); var gradient2 = ctx2.createlineargradient(0, 0, 0, 400); gradient3.addcolorstop(0, '#f5d147'); gradient3.addcolorstop(1, '#dfb30c');
as can see, not dry, , hate it. there way .getcontext on canvas want use , apply gradients of them @ once?
last time used chart.js, had 17 different charts create.
as long can grab of canvas
tags, can add them object array this:
//get array of canvases on dom var chartcount = $('canvas').length; (var = 1; < chartcount; i++) { //get dom element of canvas var el = $('chart').get(i); //add new entry canvas array dom element , canvas context canvas[i] = { 'dom_element': el, 'context': el.getcontext('2d') }; }
then each canvas context can referenced canvas[x]['context']
.
you write function loop through entires in canvas array adding gradients desired.
Comments
Post a Comment