Difficulty layering canvas element over input field - javascript

I am trying to layer a canvas over an input text element. While I believe I have done this I am having issues. Because I want to put a filter over the text input, I am using JSManipulate library to apply the filter onto the canvas element. I have successfully used JSManipulate before to apply the filter onto the canvas and also filling this same canvas with text which distorted the text as expected. However now that I want to layer the canvas on an input element so that a person can see their input being distorted as they type, there seems to be no effect. I am at a loss rn, I have tried changing the heights of each element and nothing. Can anyone let me know why I can't get the filter to work over the input? Here is my code
Any help appreciated, or if you know how I would do this using an event listener instead... just thought the layering would be more efficient. Or how I could get this to layer properly.
<!DOCTYPE html>
<html>
<head>
<style>
canvas, input[type="text"] {
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<script type="text/javascript" src="jsmanipulate.js"></script>
<input type="text" style="width: 1100px; height: 1100px;">
<canvas id = "filterCanvas" width="1100" height="1100"></canvas>
<script>
var canvas = document.getElementById("filterCanvas");
var ctx = canvas.getContext("2d");
var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
JSManipulate.sineripple.filter(data, {
xAmplitude: 12,
yAmplitude: 30,
xWavelength: 30,
yWavelength: 12});
ctx.putImageData(data, 0, 0);
</script>
</body>
</html>
I applied the filter to the canvas which I have done successfully before. Thus I thought simply layering the canvas on an input element the filter would also be on the input the user writes. Also tried rescaling the sizes of the input box as well as the canvas, tried aligning them using CSS styles but nothing has worked.

Related

FabricJS : Large canvas causes objects to be rendered on the lower canvas but no objects appear on browser screen

I created a huge canvas on and rendered a lot of objects on the canvas using FabricJS . It seems to work fine on chrome . However when I do the same on Mozilla FireFox no objects appear on the screen. Upon inspecting the elements using the dev tools I see that the objects have been rendered on the lower canvas but no objects appear on the screen.
JS Fiddle - https://jsfiddle.net/abhroy/pf1LxyaL/
Try the fiddle on chrome and FireFox and change the canvas size to 6000 by 6000 using JS the objects are rendered on chrome but not on firefox. I wanted to know the reason for this and what is the solution to rendering the objects on FF given a large canvas size.
It would be better if you try out the above code on new browser tabs instead of jsfiddle and inspecting the elements. I know using large canvases is not preferable but I was trying out a specific case .
While initalizing canvas set width and height. Here is jsfiddle
DEMO
function init() {
var count = 0;
canvas = new fabric.Canvas('c', {
width: 1300,
height: 1000
});
var rect = new fabric.Rect({
left: 50,
top: 50,
fill: "red",
width: 100,
height: 100,
});
canvas.add(rect);
}
init();
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.0/fabric.js"></script>
<body>
<div class="canvas-div">
<canvas id="c" style="border:1px solid black"></canvas>
</div>

document.createElement() without setting width and height

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?

Canvas line width changes as browser window size changes, any idea to work around?

I have a canvas inside a div and it fills the whole div. I draw a line on canvas but when I resize browser window, width of the line on the canvas changes, as I increase browser window size its thickness increases and adds some blur to the line.
I figured out that problem occurs here; I dont use a fixed size for canvas instead I use %100 for the width and height.
#myCanvas{
margin:0;
padding: 0;
border:0;
width: 100%;
height: 100%;
background-color: white;
}
When I used fixed size in pixeel for width and height, it's ok. But I want my canvas to resize without disturbing the drawing inside.
You can play around here: http://codepen.io/ertugrulmurat/pen/nxhof
Just try to change the heigth of browser window.
Any idea would be appreciated.
This is unfortunately quite involved to fix. Essentially you need to:
Add an event listener to the window for the resize event and
change the width/height attributes on the canvas tag (not the css, that stays at 100%) every time the window resizes
You will also need to redraw the line every time the resize happens.
Remember the width/height attributes are unitless so make sure you set it to something like width="100" and not width="100px"
Here is the relevant section of your code with the corrections in place:
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.canvas.width = ctx.canvas.clientWidth;
ctx.canvas.height = ctx.canvas.clientHeight;
var draw = function(){
ctx.lineWidth = 0.5;
ctx.shadowBlur = 0;
ctx.strokeStyle="#FF0000";
ctx.beginPath();
ctx.lineWidth=0.5;
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();
ctx.closePath();
}
window.addEventListener('resize', function(){
ctx.canvas.width = ctx.canvas.clientWidth;
ctx.canvas.height = ctx.canvas.clientHeight;
draw();
});
draw();
}
I've taken a look around and it seems that the canvas element doesn't deal well with CSS, and it's best to define the width and height as part of the tag, such as
<canvas width="200" height="100"></canvas>
Of course the only problem is that those values are only in px. My work around would be to use javascript to therefore collect the parent size and enter the new value on the resize event. I have wrote all this out in a jsfiddle for you and it works brilliantly if you resize.
Note that I call the redraw function every time it is resized. If you fail to do this, it goes blank until the next click.
http://jsfiddle.net/N23w2/1/

Create Image from Div

I'am new to canvas. I was using the following code to insert a image in canvas from another image. When I try to create image from a div using the code
<!DOCTYPE html><html>
<head>
<title>test</title>
<script type="text/javascript">
var colour="#ccc",bgcolour="#fff";
function paint(hhh){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
var img=document.getElementById('mine');
ctx.drawImage(img,0,0);
}
</script>
</head>
<body onload="paint('scribble');" >
<canvas id="canvas" style="border:solid 1px;" width="400" height="400">g</canvas> <div id="mine">canvas</div>
</body>
</html>
It is not working.
My question is how to draw a image from div instead of another image?
The only images you may draw with drawImage on a Canvas, are those declared in "src" attributes of a image object. Specifications may be found here.
I don't know any method to put the contents of a div tag inside of an image object and I don't think this is really an easy thing to do. You should think about alternatives...
The problem is you can't draw to the canvas from an element that isn't an image, or another canvas element. Check out this MDN article for some more information Using images with canvas
Another issue is you are treating a div like an image in your events, divs do not have an onload event.

possible to render canvas drawing into div?

I am trying to draw a shape on an HTML5 canvas but have the shape appear in a div (that can be manipulated by javascript). How can i do this? I would post code but i dont even know where to start with this. Please help.
To clarify: i want the shapes rendered on the canvas to be placed in divs. Sorry for any confusion.
Mozilla Drawing: https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes
<div>
<canvas id="my_canvas"></canvas>
</div>
<script>
var canvas = document.getElementById('my_canvas');
// Set width height. You should probably use the width/height of the div.
canvas.width = 300;
canvas.height = 300;
var ctx = canvas.getContext('2d');
// Draw something with ctx.....
// ....
</script>
You could use the library Canvas2Image. It will allow you to convert what's on the Canvas into an image. There are some quirks on a per browser basis, but it is the closest thing to what you want to do without having to put many canvas elements on your page that you update in tandem.

Categories

Resources