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
Related
In this code below I use clip path and the mouse to create a flashlight effect with your mouse and you can use it to look around an image and this works perfectly fine.
However I'm wondering how to create a JavaScript function to stop this happening and just display the whole image without the flashlight effect. This would be attached to the button turn on light.
I have tried and the closest I've got is that it shows the image fine but goes back to the flashlight after I move the mouse.
Any code on how to stop this and a bit of explanation how its stoping the effect would be great
So I want the flashlight effect to stop working when I click the button
<html>
<head>
<style>
.image {
width:600px;
height:400px;
border:5px solid black;
cursor:none;
}
.image .torch {
width:600px;
height:400px;
background:url("back.jpg") center no-repeat;
background-size:cover;
clip-path:circle(30% at 0% 0%);
}
</style>
<script>
function moveTorch(event){
var torch = document.getElementsByClassName("torch")[0];
torch.style.clipPath = `circle(30% at ${event.offsetX}px ${event.offsetY}px)`;
}
function turnOn(){
}
</script>
</head>
<body>
<div class="image" onmousemove="moveTorch(event)">
<div class="torch">
<button onclick="turnOn();">Turn on Light</button>
></div>
</div>
</body>
</html>
Try this code:
<html>
<head>
<style>
.image {
width:600px;
height:400px;
border:5px solid black;
cursor:none;
}
.image .torch {
width:600px;
height:400px;
background:url("back.jpg") center no-repeat;
background-size:cover;
clip-path:circle(30% at 0% 0%);
}
</style>
<script>
var flashLightOn = false;
function moveTorch(event){
if (!flashLightOn) {
var torch = document.getElementsByClassName("torch")[0];
torch.style.clipPath = `circle(30% at ${event.offsetX}px ${event.offsetY}px)`;
}
}
function turnOn(){
flashLightOn = true;
var torch = document.getElementsByClassName("torch")[0];
torch.style.clipPath = "none";
}
</script>
</head>
<body>
<div class="image" onmousemove="moveTorch(event)">
<div class="torch">
<button onclick="turnOn();">Turn on Light</button>
>
</div>
</div>
</body>
</html>
Basically it stores the flash liste state (on/off) in a variable. When on, the event that makes the flash light effect does nothing (if flashLightOn statement).
When you click on the button, the flashLightOn value is set to false, and the style of the "torch" is reset to default to disable the light effect.
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>
This question already has answers here:
JSFiddle code not working in my own page
(3 answers)
Closed 5 years ago.
Sorry, not quite the same as previously asked versions of this. I've tried those solutions to no avail.
I have worked with some folks to iron out some issues with a snippet we were working on. Finally got it working on JSfiddle how we need it, but for whatever reason, it's not working on a plain HTML site. The content looks to load, but the preview doesnt work after choosing an image.
Here is the JSfiddle working here: http://jsfiddle.net/ELcf6/568/
Here is all of the code pieces compiled into a single page for testing. This is the example that seems to not work. Does JSfiddle inject any pre-requisites that I might be missing?
Any help in figuring this out would be greatly appreciated.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var filetype = imageLoader.files[0].type;
var reader = new FileReader();
reader.onload = function (event) {
if(filetype.indexOf("image") > -1){
$('.uploader img').attr('src',event.target.result);
}else if(filetype.indexOf("video") > -1){
$('.uploader video')[0].src =reader.result;
}
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
<style type="text/css">
.uploader {
position:relative;
overflow:hidden;
width:300px;
height:350px;
background:#f3f3f3;
border:2px dashed #e8e8e8;
}
#filePhoto{
position:absolute;
width:300px;
height:400px;
top:-50px;
left:0;
z-index:2;
opacity:0;
cursor:pointer;
}
.uploader img,.uploader video{
position:absolute;
width:302px;
height:352px;
top:-1px;
left:-1px;
z-index:1;
border:none;
object-fit:cover;
}
</style>
<title></title>
</head>
<body>
<div class="uploader" onclick="$('#filePhoto').click()">
click here or drag here your images for preview and set userprofile_picture data
<img src=""/>
<video></video>
<input type="file" name="userprofile_picture" id="filePhoto" />
</div>
</body>
</html>
Your script is running before the DOM has loaded and that's why you are getting the "Cannot read property 'addEventListener' of null" error.
Move the script so that it is just before the close of the body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.uploader {
position:relative;
overflow:hidden;
width:300px;
height:350px;
background:#f3f3f3;
border:2px dashed #e8e8e8;
}
#filePhoto{
position:absolute;
width:300px;
height:400px;
top:-50px;
left:0;
z-index:2;
opacity:0;
cursor:pointer;
}
.uploader img,.uploader video{
position:absolute;
width:302px;
height:352px;
top:-1px;
left:-1px;
z-index:1;
border:none;
object-fit:cover;
}
</style>
<title></title>
</head>
<body>
<div class="uploader" onclick="$('#filePhoto').click()">
click here or drag here your images for preview and set userprofile_picture data
<img src=""/>
<video></video>
<input type="file" name="userprofile_picture" id="filePhoto" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var filetype = imageLoader.files[0].type;
var reader = new FileReader();
reader.onload = function (event) {
if(filetype.indexOf("image") > -1){
$('.uploader img').attr('src',event.target.result);
}else if(filetype.indexOf("video") > -1){
$('.uploader video')[0].src =reader.result;
}
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
</body>
</html>
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?
My canvas element isnt working right. It wont draw a rectangle. Please help me diagnose the problem. I don't know where the problem is, is it my css, javascript, or html? Did I set up everything right because I got no errors when i ran my debugger and put it on a server?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Paco Developement</title>
<link rel="stylesheet" href="style.css" />
<script src="game.js"></script>
</head>
<body>
<canvas id="canvasBg" height="500" width="800"></canvas>
<canvas id="character" height="500" width="800"></canvas>
</body>
</html>
style.css
* {
padding:0px;
margin:0px;
}
header, section, footer, aside, nav, article, figure, hgroup{
display:block;
}
body {
background:#BADA55;
width:100%;
height:100%;
}
#canvasBg {
display:block;
background:#fff;
margin:100px auto 0px;
}
#character {
display:block;
margin:-500px auto 0px;
}
game.js
var canvasBg = document.getElementById('canvasBg');
var bgCtx = canvasBg.getContext("2d");
document.addEventListener('load',drawRect,false);
function drawRect(){
bgCtx.fillStyle="#FF0000";
bgCtx.fillRect(0,0,150,75);
}
Live Demo
Change document to window for your event listener and it should work for you.
window.addEventListener('load',drawRect,false);