Is there a way to import OL methods of pan and zoom to canvas element of html5? I am using this code to load an image into the canvas element.
<html>
<head>
<style>
body{
background: #333333;
}
canvas{
border:1px solid yellow;
background: #999999;
width:1000;
height:500;
margin-top:20%;
}
</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<center>
<canvas id="myCanvas"></canvas>
</center>
<img id="Map" src="http://upload.wikimedia.org/wikipedia/commons/a/a8/VST_images_the_Lagoon_Nebula.jpg" width="10" height="10" style="display:none;" >
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("Map");
ctx.drawImage(img, 0, 0,300,150);
</script>
</body>
</html>
Is there a way that i can use the pan and zoom method from open layers to zoom and pan my image inside the canvas element?
Related
I am trying to very simply draw a rectangle on a canvas with Electron but none of the code is running after the line "var ctx = canvas.getContext("2d")". I'm brand new to JS and Electron. At first I thought that maybe the JS code was being run before the canvas was rendered, but I don't think that's the case here. Here is app.js:
function initDraw(canvas) {
var ctx = canvas.getContext("2d")
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();
}
and here is index.html:
<!doctype html>
<html>
<head>
<style>
.aligncenter {
text-align: center;
}
#canvas {
width:2000px;
height:2000px;
border: 10px solid transparent;
}
.rectangle {
border: 1px solid #FF0000;
position: absolute;
}
</style>
</head>
<body>
<div id="canvas"></div>
<script src="app.js"></script>
<script>
initDraw(document.getElementById('canvas'));
</script>
</body>
</html>
I am using macOS and Electron. I'm sure the solution is very simple, but any help would be much appreciated.
the element containing the id "canvas" is a div. but it should not be a div. It should be a canvas.
<canvas id="canvas"></canvas>
I've tried many solutions online, but for some reason, this page still moves around vertically when moving my touch on the canvas:
<html>
<head>
<style>
html, body {
overflow-x: hidden;
}
body {
background-color: lightgray;
position: relative;
}
body.noScroll {
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="myCanvas" style="touch-action: none;" width="800" height="800"></canvas><br>
<script>
document.body.addEventListener("touchmove", getTouchPos)
var canvas = document.getElementById('myCanvas')
var context = canvas.getContext('2d')
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
function getTouchPos(evt) {
evt.preventDefault();
}
</script>
</body>
</html>
Tested on iOS Safari.
Have you found this post yet?
Disable scroll/swipe action for html canvas drawing on ios
It led to the following link. Looks like there are multiple events you have to account for. you have to reference your canvas as a dom element as well to evaluate the target
http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html
I want to stretch the font of a canvas Text object. How can I do this?
Example (before):
Example (after):
How could I implement this?
You can use scaleX to "squish" the text by scaling the text:
// "squish" the text to 60% of its original width
scaleX:0.60
Example code and a Demo
var canvas = new fabric.Canvas('canvas');
var myText = new fabric.Text('NEW TEXT',{
left: 50,
top: 60,
});
canvas.add(myText);
var mySquishedText = new fabric.Text('NEW TEXT',{
left: 50,
top: 100,
scaleX:0.60,
});
canvas.add(mySquishedText);
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas" width=300 height=300></canvas>
[Update: #AndreaBogazzi adds that scaleX is better handled than the matrix ops]
I am trying to put an HTML5 canvas as the background of my web page. I can't get it to work no matter what I do. Does anyone know how? This is my current attempt:
<!DOCTYPE html>
<html>
<head> <title> Test </title> </head>
<style>
#bgcanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index = -1;
}
</style>
<script type="text/javascript">
function fillCanvas(){
var bg = document.getElementById("bgcanvas");
var ctx = bg.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 50, 50);
ctx = document.getElementById("screen").getContext("2d");
ctx.fillStyle = "#0000FF";
ctx.fillRect(0, 0, 500, 400);
}
</script>
<body onload="fillCanvas();">
<center>
<h1>Test Page</h1>
<canvas id="screen" width=720 height=480 style="background: black;">
Your browser sucks. Please upgrade.
</canvas>
</center>
</body>
<canvas id="bgcanvas" width=100 height=100> </canvas>
</html>
Thanks!
There are a few simple errors here you can adjust to make it work as pointed out in the various comments:
#bgcanvas {
/* ... rest not shown ... */
/* remove these unless you want the content to scale like an image:
width: 100%;
height: 100%;
*/
z-index: -1; /* change = to :. = is not supported in CSS for properties */
}
Move the canvas element inside the body tags:
...
<canvas id="bgcanvas" width=100 height=100> </canvas>
</body>
Tip: Increase the size to get better quality (you would currently scaling an "image" of 100x100 pixels to about the size of the window which will can give a poor result).
You can alternatively drop the CSS sizing and set the canvas size this way in your script before you draw anything to it:
var bg = document.getElementById("bgcanvas");
bg.width = window.innerWidth;
bg.height = window.innerHeight;
I have red rectangle as a canvas.
And i have green rectangle as a html element.
I try to unite them together as a one canvas element as you can see in the demo jsfiddle
My code:
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#myCanvas{
width:300px; height:150px;
border:1px solid #d3d3d3;
position:absolute; top:0;left:0;
}
div{
width:75px; height:75px;
border:1px solid blue;
position:absolute; top:0;left:50px;
background-color:green;
}
button{
position:absolute; top:0;left:150px;
}
</style>
</head>
<body>
<canvas id="myCanvas" >
Your browser does not support the HTML5 canvas tag.</canvas>
<div></div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
</script>
<button onclick="copy()">Copy</button>
</body>
</html>
many thanks.
There is no direct way to get html element as image and then you can easily put it into canvas. But maybe you can make it by taking screenshot of html.
You might want to look at this article;
Take screenshot of web page