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>
Related
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 was testing html5 canvas element, and wish my canvas to be full screen in the display area. But I found if I set the canvas height to window.innerHeight, the scroll bar will be shown up. I tried and found need to set the height to 5 pixel less, the scroll bar will disappear, but unfortunately it left a white border below the canvas. If it's a div element, everything is fine.
The code I'm using to test is:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function load() {
var o = document.getElementById('canvas');
if (o) {
o.width = window.innerWidth;
o.height = window.innerHeight - 5;
}
o = document.getElementById('div');
if (o) {
o.style.width = window.innerWidth + 'px';
o.style.height = window.innerHeight + 'px';
}
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: white;
}
#canvas {
background-color: blue;
}
#div {
background-color: green;
}
</style>
</head>
<body onload="load();">
<canvas id="canvas"></canvas>
<!--div id="div"></div-->
</body>
</html>
I've cleared the body margin and padding.
I test it on Chrome 8.0.552, and also it acts same on Firefox 3.6.13 but 4 pixel less is fine.
Anything I missed? Any suggestions will be really appreciated. Thanks a lot.
By default canvas, unlike div, is display: inline; so it gets set to vertical-align: baseline;. You can take either of the following approaches to make things naturally fill the window.innerHeight:
#canvas {
background-color: blue;
vertical-align: top;
}
Or:
#canvas {
background-color: blue;
display: block;
}
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?
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