In order to avoid the bug in chart.js where hovering over tooltips is overwritting the graph with old ones, I want delete a canvas and create a new one inside a div when i click on a button, this happens in the click function:
var chartContainer = document.getElementById('ChartContainer_'+channelName);
var chart = document.getElementById('Chart_'+channelName);
chartContainer.removeChild(chart);
var graph = document.createElement("CANVAS");
graph.setAttribute("id", "Chart_"+channelName);
chartContainer.appendChild(graph);
My initial canvas looks like this:
<canvas id="Chart_Channel0"></canvas>
But if the click function is called it is creating a canvas looking like this:
<canvas id="Chart_Channel0" height="187" width="375"
style="display:block; height: 150px; width:300px;">
The canvas is inside of a modal, so the initial canvas seems to fit the size of the modal, but the new one stays too small.
Is it possible to create a canvas without all these parameters?
Related
I was working on a couple of Chart.js charts and have found some strange behavior.
In this fiddle: http://jsfiddle.net/h42tv3xv/ people have been getting a variety of side effects when pressing the buttons "Day", "Week", or "Month".
What it should do:
Simply refresh the chart with potentially new information displayed(the pie and doughnut actually don't have anything new)
What it should not do:
As a side effect for some, it is growing the size of the <canvas> on each click. It does it for me. But it doesn't do it for a lot of other people accessing this fiddle. Here is a screen shot:
Why is it doing this for some people and not others? How can I remedy this problem? If you are curious, I initially asked a question about something else about these charts, but this could be somewhat related.
Any clue what could be causing this in my browser and other browsers/computers?
Edit, I realize the fiddle is large, so this is what I am doing essentially:
// Assign and Create all canvas contexts
var ctx = $("#graph1").get(0).getContext("2d");
var ctx2 = $("#graph2").get(0).getContext("2d");
var ctx3 = $("#graph3").get(0).getContext("2d");
// Instantiate new charts and pass in generated data
var myChart = new Chart(ctx).Line(graph1Generator("day"));
var myDoughnutChart = new Chart(ctx2).Doughnut(graph2Generator("day"));
var myPieChart = new Chart(ctx3).Pie(graph3Generator("day"));
then I am adding (for each button) an event listener that destroys each canvas, and creates a new one with new information. Here is an example of the "week" button:
weekButton.addEventListener("click", function(){
myChart.destroy();
myChart = new Chart(ctx).Line(graph2Generator("Week"));
myDoughnutChart.destroy();
myDoughnutChart = new Chart(ctx2).Doughnut(graph2Generator("week"));
myPieChart.destroy();
myPieChart = new Chart(ctx3).Pie(graph3Generator("week"));
});
Wrap the element inside a wrapper and set its max-width to be 80% or as desired.
Turn off responsiveness.
Check out this fiddle and let me know whether you are still getting bloated chart on clicking re-renders.
<div class="wrapper">
<canvas id="graph1" width="300" height="300"></canvas>
<canvas id="graph2" width="250" height="250"></canvas>
<canvas id="graph3" width="250" height="250"></canvas>
</div>
.wrapper {
max-width: 80%;
}
I had the same behaviour defining padding definition to my canvas. I removed padding and I have no resizing now.
I'm creating a collage making application.
This is the code of Canvas. The image is appearing in the background of canvas.
<canvas id="c" width="800" height="600" style="left: -300px; background-image: url('_include/img/Images/rainy_day-1366x768.jpg');"></canvas>
But, when I click on Create Collage button the background is transparent. How can I capture the canvas with background image?
Button click code:
function convertCanvasToImage() {
var canvas = document.getElementById('c');
var image_src = canvas.toDataURL("image/jpeg");
window.open(image_src);
}
I've referred the similar questions and found that we can use or and place Canvas over it. I'm not getting how can I implement that and when I will click on Create Collage button, its gonna capture the background? I'm not sure about it. I'm using Fabric.js
Thanks for any help.
You can't! CSS backgrounds are not part of the canvas (just the element as any background to other elements).
You you need to draw the background onto the canvas instead of using it as a CSS background as this is the only data captured by toDataURL().
If you are using clearRect or fillRect to update the canvas you can consider using drawImage instead with the background image.
Better to use html2canvas script.
The code look like this.
html2canvas($("#c"), {
onrendered: function(canvas) {
var Image1 = canvas.toDataURL("image/jpeg");
window.open(Image1);
}
In my program I am drawing an image the canvas multiple times. My code looks something lik this:
<img id="image1" src="image1.png" width="200" height="100" hidden ="hidden">
<script type ="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.drawImage(image1, 50, 50, 200, 100);
ctx.drawImage(image1, 100, 100, 200, 100);
<script/>
My questions is, is it possible to delete just one instance of this image? For instance just delete the image drawn at 100,100 and leave the one at 50,50?
The moment you draw something to a canvas it stops being an independent object and becomes a bunch of pixels on a canvas. The information that these pixels together form a larger object is lost. You could remove it by using context.clearRect, but that will also erase anything else which is drawn on the same area, so it won't do what you want when the image overlaps with other content.
I would recommend you to clear the whole canvas and draw the whole scene again without the image.
Another option is to use multiple canvas'es as layers by placing them on top of each other using CSS positioning. That way any transparent pixels on the top canvas will show the content of the canvas below. This allows you to erase parts of one canvas without affecting the content of the canvas above or below it.
I am creating an applicattion to make mindmaps in Canvas and now i have problems with the resize of elements. Initially i have this:
<div id="lienzo">
<canvas id="canvas2" width="1000" height="1000">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
But any time i want to change the size of the canvas,ie change the width and height of the element canvas.
I have tried remove the canvas with:
$('canvas').remove();
And later create a new element canvas with:
$("<canvas/>",{id:'canvas2'}).appendTo('#lienzo');
$('canvas').width(500);
$('canvas').height(500);
Later i did this i redraw the element in Canvas but this elements look pixelated
Of course, in the new canvas I can´t selected the element.
I tried to change directly measures of Canvas but i have the same problem.
After explaining all, the question is, how could i change the size of Canvas on the fly without that the items in the canvas change. Any idea?
Thanks you for your time
That's because the jQuery .width() and .height() methods change the size of the element with CSS, this is equivalent to scaling it, it doesn't change anything within the canvas element. If you want to change the number of pixels the canvas displays you need to set the .width and .height properties of the canvas element. Try this:
$('#canvas2')[0].width = 500;
$('#canvas2')[0].height = 500;
I'm creating a HTML Canvas object using this javascript code:
var Canvas = document.createElement("canvas");
Canvas.style.width = "500px";
and then i'm drawing text upon it.
When the canvas is displayed, the whole canvas has been scaled up (including content) to to match the 500px width, which results in ugly resampling. What i really want, is that the content stay the same size, only the canvas itself made bigger.
Any ideas?
Try changing the element’s width instead of its CSS width.
Canvas.width = 500;
Thomas' answer is correct, but it sound's like you also want to keep the existing content on the canvas. When you change the canvas size, it automatically gets cleared and reset to it's default state. Because of that, you will either need to redraw the contents, or copy the contents to another canvase (using drawImage), resize the canvas, then copy the contents back (again, using drawImage).