Hey my image wont load onto the canvas. I've been at this for hours and I cant figure out what it is. I started to debug my code in google chrome and the console says canvas.width is set to null. Thats the only error I can find.
Here is my code:
function gameLoop()
{
drawBackground();
drawPlayer();
}
function drawBackground()
{
var img = new Image();
img.src = "Images/GrassTexture.png";
g.drawImage(img,0, 0, 500, 500);
}
function drawPlayer()
{
var player1 = new Image();
player1.src = "Images/Players/Mignolet.png";
g.drawImage(player1,0, 0,50 , 50);
}
setInterval(gameLoop, 1);
var canvas = document.getElementById("Canvas");
canvas.width = 500;
canvas.height = 500;
var g = canvas.getContext("2d");
html
html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<script type="text/javascript" src="Js/Js.js"></script>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
</body>
</html>
Css
#Canvas
{
border: 1px solid black;
width:500px;
height:500px;
margin-left: 300px
}
the script is being called before the html is rendered which is why you were getting the error. its always best to place scripts just before the <body> tag ends.
<html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
<script type="text/javascript" src="Js/Js.js"></script>
</body>
Related
I have successfully moved this video camera that I have written in HTML to the right, so that it is in the center of the form, but would like to know how I can find the exact center of the form by finding the total width an dividing it by two in CSS. Any ideas on how I can get the full size of the width of the form?
The following is the source code:
<html>
<head>
<title>Webcam</title>
<style>
div.video-wrap
{
position: relative;
left: 450px;
}
</style>
</head>
<body>
<h2>Image Recognition Login</h2>
<div class="video-wrap">
<video id="video" playsinline autoplay></video>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<p>Click the following <span class="glyphicon glyphicon-camera"></span>
button to take a facial image of yourself (be sure to look straight into the camera):</p>
<p>
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-camera"></span> Camera
</a>
</p>
</div>
<div class="controller">
<button id="snap">Capture</button>
</div>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
'use strict';
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById('snap');
const errorMsgElement = document.getElementById('spanErrorMsg');
const constraints =
{
audio: true,
video:
{
width: 1280, height: 550
}
};
async function init()
{
try
{
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
}
catch(e)
{
errorMsgElement.innerHTML = `navigator.getUserMedia.error:${e.toString()}`;
}
}
function handleSuccess(stream)
{
window.stream = stream;
video.srcObject = stream;
}
init();
var context = canvas.getContext('2d');
snap.addEventListener("click", function()
{
// drawImage(image, xCoordinate, yCoordinate, recWidth, recHeight)
context.drawImage(video, 0, 0, 640, 480);
});
</script>
</body>
</html>
You can assign a second class (or better, an id) to the div, then use css on that class/id to move it
I'm trying to process image with GaussianBlur.
But I can't make it work. It says:
Uncaught TypeError: fields[fieldName].write is not a function
at Object.toWireType (opencv.js:30)
at Object.GaussianBlur (eval at new_ (opencv.js:30), <anonymous>:9:26)
at Object.proto.<computed> [as GaussianBlur] (opencv.js:30)
at HTMLImageElement.img.onload (pen.js:110)
Here is codepen: https://codepen.io/sundowatch/pen/jOEqrqY?editors=1010
I can't find what is the problem with that.
It works for me, here is a working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput" ></canvas>
<div class="caption">canvasOutput</div>
</div>
</div>
<script type="text/javascript">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {
let src = cv.imread(imgElement);
let dst = new cv.Mat();
let ksize = new cv.Size(5, 5);
cv.GaussianBlur(src, dst, ksize, 0, 0, cv.BORDER_DEFAULT);
cv.imshow('canvasOutput', dst);
src.delete(); dst.delete();
};
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>
Your problem is elsewhere. In developer tools on your snippet if I try to get the cv element I get an error. Can you double check that you are loading opencv.js <script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
I was testing this sample code and I obtained the error
Uncaught TypeError: Cannot set property 'width' of null
where "canvas.width = ...".
Could you help me? Here the code:
var canvas = document.getElementById("sim00");
var dim = {
w: 600,
h: 480
};
canvas.width = Math.min(dim.w, window.innerWidth - 20);
canvas.height = Math.min(dim.h, window.innerHeight - 20);
canvas {
border: 1px solid #d3d3d3;
max-width: 100%;
height: auto;
}
<canvas id="sim00" width="300" height="300"></canvas>
I had the same issue, What worked is that I changed the position of my script tag.
Automatically when I generate my HTML skeleton, the script tag appears in the <head>
but after placing it in the <body>, my code worked.
<html>
<head>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<canvas id="canvas" width="1950px" height="800px"></canvas>
<canvas id="canvasbg" width="1950px" height="800px"></canvas>
</body>
</html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="1950px" height="800px"></canvas>
<canvas id="canvasbg" width="1950px" height="800px"></canvas>
<!-- I omitted some code for simplicity. -->
<!-- Bottom line, Check the placement of your js file. -->
<script type="text/javascript" src="main.js"></script>
</body>
</html>
You have to use style to change css from js.
canvas.style.width = Math.min(dim.w, window.innerWidth - 20);
canvas.style.height = Math.min(dim.h, window.innerHeight - 20);
<!DOCTYPE html>
<html>
<body>
<div id="container">
<canvas id="myCanvas" width=350 height=250>
</canvas>
</div>
</body>
</html>
to change the size use
var myCanvas = document.querySelector("#myCanvas");
myCanvas.width = 350;
myCanvas.height = 250;
I have created an image drawing canvas but the drawing color can't change. maybe it's javascript set color but can't find. if anyone knows please help me. this is the demo link
http://affibe.com/erevo/
HTML Code:
`
<html class="gr__adsterra_com">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/pixi.min.js"></script>
<script type="text/javascript" src="js/animationFrame.js"></script>
<script type="text/javascript" src="js/nodes.js"></script>
<style>body{margin: 0; background-color: transparent;}</style>
</head>
<body data-gr-c-s-loaded="true">
<header>
<script>lowPerformance=function (){var ua=navigator.userAgent.toLowerCase(); if (ua.indexOf("iphone") !=-1 || ua.indexOf("mobile") !=-1) return true; if ($(window).width()==0) return; return ($(window).width() <=480) ? true : false;}; var ie=false; var w=window, d=document, documentElement=d.documentElement, body=d.getElementsByTagName('body')[0], height=w.innerHeight|| documentElement.clientHeight|| body.clientHeight; if (navigator.appName=='Microsoft Internet Explorer') ie=true; Nodes.multipleInit([{"post_name": "AFFIBE", "drawnImage": (height>860)?"http:\/\/affibe.com\/erevo\/images\/main\/logo_header_er.png":"http:\/\/affibe.com\/erevo\/images\/main\/logo_header_er.png", "linkTitle": "AFFIBE", "particleDensity": ie?"11":"7", "particleWidth": "0.5", "particleHeight": "0.5"}]); </script>
</header>
</body>
</html>
pixi.min.js:
http://affibe.com/erevo/js/pixi.min.js
animationFrame.js
!function(){for(var n=0,i=["ms","moz","webkit","o"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var e=(new Date).getTime(),a=Math.max(0,16-(e-n)),o=window.setTimeout(function(){i(e+a)},a);return n=e+a,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(n){clearTimeout(n)})}();
if i understand it the follow code help to you
var c = document.getElementById("canvas");
var ctx= c.getContext("2d");
ctx.fillStyle="#66bfff";
for example
var c = document.getElementById('canvas');
var ctx = c.getContext("2d");
ctx.fillStyle = "#f00";
ctx.fillRect(40, 40, 40, 40);
#canvas{
border: 2px solid #333;
}
<html>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
</body>
</html>
i have a problem:
I'm working on map generator, using html canvas, the user inputs X,Y, width and height of an image.
But when i use drawImage with users input, the image doesn't fit the Canvas XY and the select height and width in pixels. Is there anything that I can use to solve this?
<html lang=''>
<head>
<title>Map tools</title>
</head>
<body>
<div align='center'>
<canvas id='map' class='mapcanvas' width="800" height="400">
</canvas>
<p>Send</p>
<textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
</div>
</body>
<script>
function loadXml(){
co = document.getElementById("xmlinput").value.split(',') // X, Y, H, L
canvas = document.getElementById("map");
context = canvas.getContext("2d");
ground.src = 'http://i.imgur.com/Z3DyMAM.png'
ground.onload = function (){
context.drawImage(ground, co[0], co[1], co[2], co[3]);
}
}
</script>
</html>
Ground was undefined. I've put it in for you.
<html lang=''>
<head>
<title>Map tools</title>
</head>
<body>
<div align='center'>
<canvas id='map' class='mapcanvas' width="800" height="400">
</canvas>
<p>Send</p>
<textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
<img id='ground' style='display: none' /> <!--You forgot the image!-->
</div>
</body>
<script>
function loadXml(){
var co = document.getElementById("xmlinput").value.split(','), // X, Y, H, L
canvas = document.getElementById("map"),
context = canvas.getContext("2d"),
ground = document.getElementById('ground'); //ground was undefined!
ground.src = 'http://i.imgur.com/Z3DyMAM.png'
ground.onload = function (){
context.drawImage(ground, co[0], co[1], co[2], co[3]);
}
}
</script>
</html>
Your code works perfectly.Just add this to the page(create an image object)
<!DOCTYPE html />
<html lang=''>
<head>
<title>Map tools</title>
</head>
<body>
<div align='center'>
<canvas id='map' class='mapcanvas' width="800" height="400">
</canvas>
<p>Send</p>
<textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
</div>
</body>
<script>
function loadXml(){
co = document.getElementById("xmlinput").value.split(',') // X, Y, H, L
canvas = document.getElementById("map");
context = canvas.getContext("2d");
var ground=new Image();
ground.src = 'http://i.imgur.com/Z3DyMAM.png'
ground.onload = function (){
context.drawImage(ground, co[0], co[1], co[2], co[3]);
}
}
</script>
</html>