i have the following code in an html file and when i try to view the code on localhost [MAMP] all i see is a black canvas area with a border around it. i've checked it in chrome and firefox. same results. what am i doing wrong?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000;"></canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function() {
var myCanvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 50, 100, 100);
//close jquery
});
</script>
</body>
so i figured it out. thanks to Ken and Scott for their help.
var myCanvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 50, 100, 100);
should have been
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d"); //should have been myCanvas not canvas
ctx.fillRect(50, 50, 100, 100);
The default fill style of the canvas is black, while the canvas itself starts out as transparent. Set it to something else before calling fillRect, and you'll see better results.
ctx.fillStyle = "#F00"
Or, try this to see multiple rectangles:
var myCanvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
FIDDLE
Related
I want to draw a figure like this.
I have used the Canvas to draw the line but failed to draw custom lines.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Line Joining</title>
</head>
<body>
<canvas id="DemoCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('DemoCanvas');
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
var lStart = 50;
var lEnd = 200;
var yStart = 20;
ctx.beginPath();
ctx.lineWidth = 25;
// Use a round corner.
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(50, 140);
ctx.lineTo(150, 140);
ctx.lineTo(150, 260);
ctx.stroke();
}
</script>
</body>
</html>
I have also tried jQuery draggable and achieved results as figure below.
Kindly suggest me how these type of figures can be drawn using HTML and jQuery/JavaScript
<hmtl>
<head>
<!--<script src='main.js'></script>-->
</head>
<body>
<canvas id='myCanvas'> </canvas>
<script>
function shape(x,y){
this.x=x;
this.y=y;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect( this.x, this.y, 50, 50);
}
}
var sqr=new shape(100,100)
sqr.x+=100
</script>
</body>
</hmtl>
why i add 100 to x and hope its positon will be (200,100) but when i open live sever it position still remain (100,100)
Because it will only change the value of x, you have to draw it again on the canvas and before drawing again we have to clear canvas using clearRect
<html>
<head>
<!--<script src='main.js'></script>-->
</head>
<body>
<canvas id='myCanvas'> </canvas>
<script>
function shape(x,y){
this.x=x;
this.y=y;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
this.draw = ()=>{
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FF0000";
ctx.fillRect( this.x, this.y, 50, 50);
ctx.stroke();
}
}
var sqr=new shape(100,100)
sqr.draw();
sqr.x+=-100
sqr.draw();
</script>
</body>
</html>
I am working in Jquery.
I have 4 Cordinates , Width, Height, x Position and Y position.
How can i create a Square shape Using This
$('#box').drawRect(20,20,2,30,{color:'red'})
I tried this and Not Working. Looking for a Good Hand
Here is My Demo. http://fiddle.jshell.net/vbm2vhu4/
try using canvas tag in JavaScript..
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
JSFIDDLE
JAVASCRIPT
Draw a circle
$(document).ready(function(){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
});
Drawing a rectangle requires canvas. You really do not need to use jquery for it. It can be well done with Javascript. I am attaching my example here.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150">
Browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Blue rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 50, 50);
ctx.stroke();
</script>
</body>
</html>
Paste this into a notepad and save as .html and load it in your browser
or jsfiddle http://jsfiddle.net/ssbiswal1987/vsbak0mq/
I'd like use Ocrad.js and to start I'd like to make a simpler version of http://antimatter15.com/ocrad.js/demo.html.
To familiarize with the library I wrote this simple example but the text doesn't get recognized correctly (I always get a '.' as output).
Any help would be appreciated.
This is my index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/ocrad.js/ocrad.js"></script>
<script type="text/javascript" charset="utf-8" src="js/test.js"> </script>
<title>ocradjs test</title>test.js
</head>
<body>
<canvas id="OCRArea" width="800" height="400" style="border:1px solid #000000;" > </canvas>
<div id="image"> </div>
</body>
</html>
And this is my js/test.js
$( document ).ready(function() {
var ch;
var cw;
var canvas = document.getElementById("OCRArea");
var ctx = canvas.getContext("2d");
var imgData ;
ctx.font="100px Georgia";
ctx.fillText("Test!",10,100);
cw = canvas.width;
ch = canvas.height;
imgData = ctx.getImageData(0, 0, cw, ch);
console.log(OCRAD(imgData));
console.log(OCRAD(canvas));
});
That's Canvas only I was also fillText, "-" was investigated because it is recognized as .
When the background is transparent but , unfortunately characters are not recognized .
Please try the following .
var ch;
var cw;
var canvas = document.getElementById("OCRArea");
var ctx = canvas.getContext("2d");
var imgData ;
cw = canvas.width;
ch = canvas.height;
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, cw, ch);
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font="100px Georgia";
ctx.fillText("Test!",10,100);
imgData = ctx.getImageData(0, 0, cw, ch);
console.log(OCRAD(imgData));
hi i have to covert a set of images to a json object.But, as a first step i was trying to do it for a single image but i don't know whether the json object is created or not.please help me to check whether the object is created.
this is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>HTML5 Example: Canvas</title>
<script>
function drawOnCanvas() {
var ctx=document.getElementById("mycanvas").getContext('2d');
var image=new Image();
image.src="2000.png";
image.onload=function() {
ctx.drawImage(image,140,0);
}
imageData = ctx.getImageData(0, 0, mycanvas.width, mycanvas.height);
var jsontext=JSON.stringify(imageData.data);
}
window.addEventListener('load', drawOnCanvas, true);
</script>
</head>
<body>
<canvas width="1000" height="1000" id="mycanvas"></canvas>
</body>
</html>
<canvas id="canvas" width="400" height="400">
</canvas>
<canvas id="c2" width="400" height="400"></canvas>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(5, 5, 300, 250);
ctx.stroke();
ctx.arc(150, 150, 100, 0, Math.PI, false);
ctx.stroke();
canvas.addEventListener("click", function (){
var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log(data);
console.log(JSON.stringify(data));
var c2 = document.getElementById("c2");
var ctx2 = c2.getContext("2d");
ctx2.putImageData(data, 0, 0);
}, false);
demo: http://jsfiddle.net/LcnbX/
ctx.getImageData() will return an object
JSON.stringify(data) will generate json string for you(see the console)