Posts

Showing posts with the label Canvas

Checking For Multiple Images Loaded

Answer : If you want to call a function when all the images are loaded, You can try following, it worked for me var imageCount = images.length; var imagesLoaded = 0; for(var i=0; i<imageCount; i++){ images[i].onload = function(){ imagesLoaded++; if(imagesLoaded == imageCount){ allLoaded(); } } } function allLoaded(){ drawImages(); } Can't you simply use a loop and assign the same function to all onloads? var myImages = ["green.png", "blue.png"]; (function() { var imageCount = myImages.length; var loadedCount = 0, errorCount = 0; var checkAllLoaded = function() { if (loadedCount + errorCount == imageCount ) { // do what you need to do. } }; var onload = function() { loadedCount++; checkAllLoaded(); }, onerror = function() { errorCount++; checkAllLoaded(); }; for (var i = 0; i < imageCount; i++) { var img = new Image(); img.onload = onload;...
Post a Comment
Read more

ChartJS Doughnut Charts Gradient Fill

Image
Answer : ChartJS will not (properly) use gradient fill colors when drawing a linear gradient on non-linear paths like your donut chart. A linear gradient does not curve. Possibility #1 -- use a radial gradient You might experiment with a radial gradient and see if the results meets your design needs. Possibility #2 -- use a gradient stroke (a DIY project) Also, canvas's stroke will curve around a circle. If you want to "roll-your-own" gradient donut chart, here's example code and a Demo that uses a gradient strokeStyle on a circular path (see my previous answer here: Angle gradient in canvas): var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); function drawMultiRadiantCircle(xc, yc, r, radientColors) { var partLength = (2 * Math.PI) / radientColors.length; var start = 0; var gradient = null; var startColor = null, endColor = null; for (var i = 0; i < radientColors.length; i++) { ...
Post a Comment
Read more

Chart.js Doughnut With Rounded Edges

Image
Answer : You can extend the chart to do this Preview Script Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut); Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({ draw: function (ease) { var ctx = this.chart.chart.ctx; var easingDecimal = ease || 1; Chart.helpers.each(this.getDataset().metaData, function (arc, index) { arc.transition(easingDecimal).draw(); var vm = arc._view; var radius = (vm.outerRadius + vm.innerRadius) / 2; var thickness = (vm.outerRadius - vm.innerRadius) / 2; var angle = Math.PI - vm.endAngle - Math.PI / 2; ctx.save(); ctx.fillStyle = vm.backgroundColor; ctx.translate(vm.x, vm.y); ctx.beginPath(); ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI); ctx.arc(radius * Math.sin(Math.PI), radius * Math.cos(Math....
Post a Comment
Read more

Chart.js Canvas Resize

Answer : I had a lot of problems with that, because after all of that my line graphic looked terrible when mouse hovering and I found a simpler way to do it, hope it will help :) Use these Chart.js options: // Boolean - whether or not the chart should be responsive and resize when the browser does. responsive: true, // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container maintainAspectRatio: false, What's happening is Chart.js multiplies the size of the canvas when it is called then attempts to scale it back down using CSS, the purpose being to provide higher resolution graphs for high-dpi devices. The problem is it doesn't realize it has already done this, so when called successive times, it multiplies the already (doubled or whatever) size AGAIN until things start to break. (What's actually happening is it is checking whether it should add more pixels to the canvas by changing the DOM a...
Post a Comment
Read more

Can You Use Canvas.getContext('3d')? If Yes, How?

Answer : There is a 3D context for canvas, but it is not called "3d", but WebGL ("webgl"). WebGL should be available in the most up-to-date versions of all browsers. Use: <!DOCTYPE html> <html> <body> <canvas id='c'></canvas> <script> var c = document.getElementById('c'); var gl = c.getContext('webgl') || c.getContext("experimental-webgl"); gl.clearColor(0,0,0.8,1); gl.clear(gl.COLOR_BUFFER_BIT); </script> </body> </html> how could you use that? I tried 3D before, but didn't really understand if you think "real" languages are difficult, you will have a lot of trouble with WebGL. In some respects it is quite high level, in other respects it is quite low level. You should brush up on your maths(geometry) and prepare for some hard work. three.js is a very appreciated library that allows you to do yet a lot of 3d without dealing wit...
Post a Comment
Read more

Canvas Arc Too Pixelated

Answer : You probably were setting the width of your canvas using CSS. Altering the width of a canvas element in CSS stretches the pixels within the canvas Eg. <canvas style='width:400px;height:400px'></canvas> Instead, you need to use the width and height properties of the canvas element itself to define how many pixels the canvas contains. Correct way: <canvas width='400px' height='400px'><canvas>
Post a Comment
Read more