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));
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>
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)
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
I am reading through "Making Isometric Social Real-Time Games with HTML5, CSS3 and Javascript."
I am not far into it, and I have run into a canvas problem that has ahd me stumped for most of the day.
drawImage() does not seem to be drawing. I have researched the issue and have tried many permutations of pre-loading the image, but so far nothing is working.
Here is my code:
HTML:
<canvas id="game" width="100" height="100">
Your browser doesn't include support for the canvas element.
</canvas>
CSS:
html {
height:100%;
overflow:hidden
}
body {
margin:0px;
padding:0px;
height:100%;
}
and js:
window.onload = function() {
var canvas = document.getElementById('game');
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
var c = canvas.getContext('2d');
function showIntro() {
var phrase = "Click or tap screen to start";
c.clearRect (0, 0, canvas.width, canvas.height);
var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, "#9db7a0");
grd.addColorStop(1, "#e6e6e6");
c.fillStyle = grd;
c.fillRect (0, 0, canvas.width, canvas.height);
var logoImg = new Image();
logoImg.src = '../img/logo.png';
var originalWidth = logoImg.width;
logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);
var logo = {
img: logoImg,
x: (canvas.width/2) - (logoImg.width/2),
y: (canvas.height/2) - (logoImg.height/2)
}
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
c.font = "bold 16px sans-serif";
var mt = c.measureText(phrase);
var xcoord = (canvas.width / 2 ) - (mt.width / 2);
c.fillStyle = '#656565'
c.fillText (phrase, xcoord, 30);
}
showIntro();
}
Any help would be appreciated!
You almost have it...
You just have to give the image time to load before drawing it.
You give an image time to load with this code:
var logoImg = new Image();
logoImg.onload = function() {
// At this point, the image is fully loaded
// So do your thing!
};
logoImg.src = "myPic.png";
Here is complete code and a Fiddle: http://jsfiddle.net/m1erickson/GKK39/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var c=canvas.getContext("2d");
function showIntro() {
var phrase = "Click or tap screen to start";
var logoImg=new Image();
logoImg.onload=function(){
c.clearRect (0, 0, canvas.width, canvas.height);
var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, "#9db7a0");
grd.addColorStop(1, "#e6e6e6");
c.fillStyle = grd;
c.fillRect (0, 0, canvas.width, canvas.height);
var originalWidth = logoImg.width;
logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);
var logo = {
img: logoImg,
x: (canvas.width/2) - (logoImg.width/2),
y: (canvas.height/2) - (logoImg.height/2)
}
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
c.font = "bold 16px sans-serif";
var mt = c.measureText(phrase);
var xcoord = (canvas.width / 2 ) - (mt.width / 2);
c.fillStyle = '#656565'
c.fillText (phrase, xcoord, 30);
}
logoImg.src="http://dl.dropbox.com/u/139992952/car.png";
}
showIntro();
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
A simplified version of the above answer.
//Create Canvas
var canvas = document.createElement("canvas");
canvas.width = 720
canvas.height = 500;
//Get Context
var ctx = canvas.getContext("2d");
ctx .fillStyle = "black";
ctx .fillRect(0, 0, canvas.width, canvas.height);
//Load Image
var img = new Image();
img.src = "https://images.pexels.com/photos/3722151/pexels-photo-3722151.jpeg";
img.onload = function() {
ctx .drawImage(
img,
0,
0,
canvas.width,
canvas.height
);
};
//Add Canvas
canvas.id = "fatLady";
document.body.appendChild(canvas);
Try it on CodePen
https://codepen.io/hiteshsahu/pen/QWjrygb?editors=1111