I have these specific codes in html but the problem is the line I draw is cutted in firefox and internet explorer.
Here is my sample html.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
c.setAttribute("width", "10000");
var ctx = c.getContext("2d");
ctx.moveTo(1,10);
ctx.lineTo(10000,10);
ctx.stroke();
</script>
</body>
</html>
Related
I created canvas as contenteditable ='true' and paste image from clipboard on top of the canvas. The image appeared beside the canvas not on top of the canvas as per image below. I get empty image when try to convert the canvas to image. This is because my canvas doesn't hold the image i paste earlier. How do I get the image?
HTML
<!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 convert()
{
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//ctx.fillRect(50,50,150,75);
var theImage=document.getElementById("toImage");
theImage.src=canvas.toDataURL();
}
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300 contenteditable='true'></canvas>
<button type="button" onClick="convert()">Click</button>
<img id="toImage" width=300 height=300>
</body>
</html>
Image
The contenteditable attribute is for text-related HTML elements, and does nothing with the <canvas> element.
See the MDN for details on contenteditable.
The Canvas Element is not an exception to contexteditable properties the difference between the canvas element and other elements is that the text inside of the canvas tag is dealing only with what shows when the canvas element is not supported. and contexteditable by definition is dealing with the text inside the element tag not the canvas ctx context that youre actually looking for. you want to look for the draw image method on your canvas a demo can be found on the w3Schools site
Is there a way by which I can create a canvas of large size but low resolution. I'm declaring the canvas with the syntax <canvas id="mycanvas" width="700" height="1000"></canvas>. I'm running the above code on a 7 inch tablet and the canvas spans half of the screen of the canvas. Is there a way by which I can create a canvas which again covers half of the screen but has a lower resolution (lower quality of image).
Actually I draw something on the canvas and then save it as image by using canvas.toDataURL(). I don't need to get good quality image, but I want to lower the size of the image generated.
Forgive me if it's a silly question
First, scale your canvas element like this (in javascript):
canvas.width=canvas1.width*scaleFactor;
canvas.height=canvas1.height*scaleFactor;
Warning: If you scale the canvas using CSS, you will likely distort images drawn on the canvas
Then you can scale your image using some added arguments to context.drawImage
var scaleFactor=0.50;
ctx2.drawImage(img, 0,0,img.width,img.height,
0,0,img.width*scaleFactor,img.height*scaleFactor);
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/6m8kg/
<!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; padding:15px;}
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var canvas2=document.getElementById("canvas2");
var ctx2=canvas2.getContext("2d");
var scaleFactor=0.50;
var img=document.createElement("img");
img.onload=function(){
// draw the image full-size on the larger canvas
ctx1.drawImage(img,0,0);
// resize the canvas
// Don't use css to resize, it will distort your image
// The scaling is done with the added drawImage arguements
canvas2.width=canvas1.width*scaleFactor;
canvas2.height=canvas1.height*scaleFactor;
// draw a scaled-down image into the second canvas
ctx2.drawImage(img, 0,0,img.width,img.height,
0,0,img.width*scaleFactor,img.height*scaleFactor);
}
img.src="faces.png";
}); // end $(function(){});
</script>
</head>
<body>
<p>Top canvas is full-sized</p>
<canvas id="canvas1" width=400 height=242></canvas><br>
<p>Bottom canvas is scaled down</p>
<canvas id="canvas2" width=300 height=300></canvas>
</body>
</html>
How do I add a functionality on a webpage that will present clicked xy points as text which can be then be copy and pasted?
I assume since you wrote “save functionality” tagged “canvas” that you want to:
Have the user to click points,
Show those points as copyable text.
Then you will use json to save that text somewhere.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/xDj3L/
<!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>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<style>
body{ background-color: ivory; padding:10px;}
canvas{border:1px solid red; float:left;}
#container{width:410px;}
#log{ width:100px; height:300px; float:right;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasMouseX;
var canvasMouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var storedPoints=[];
ctx.strokeStyle="orange";
ctx.font = '12px Arial';
$("#canvas").mousedown(function(e){handleMouseDown(e);});
function handleMouseDown(e){
canvasMouseX=parseInt(e.clientX-offsetX);
canvasMouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
storedPoints.push({x:canvasMouseX,y:canvasMouseY});
var count=storedPoints.length;
var X=canvasMouseX-(count<10?4:7);
ctx.strokeStyle="orange";
ctx.fillStyle="black";
ctx.lineWidth=1;
ctx.beginPath();
ctx.arc(canvasMouseX, canvasMouseY, 8, 0 , 2 * Math.PI, false);
ctx.fillText(storedPoints.length, X, canvasMouseY+4);
ctx.stroke();
$("#log").html(toHtml());
}
function toHtml(){
htmlPoints="";
for(var i=0;i<storedPoints.length;i++){
htmlPoints+="<p>"+storedPoints[i].x+","+storedPoints[i].y+"</p>"
}
return(htmlPoints);
}
$("#clear").click(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
storedPoints=[];
$("#log").html(toHtml());
});
}); // end $(function(){});
</script>
</head>
<body>
<br/><p>Click on canvas to create points as text</p><br/>
<button id="clear">Clear Canvas</button>
<div id="container">
<canvas id="canvas" width=300 height=300></canvas>
<div id="log"></div>
</div>
</body>
</html>
Is it possible to apply transformation to the shadow?
For example, to the shadow of the rectangle was diamond shaped.
<div><canvas id="myCanvas" width="900" height = "700" style="border:solid 1px #000000;"></canvas></div>
<script>
var context = document.getElementById("myCanvas").getContext("2d");
function draw_rectangle() {
context.shadowOffsetX = 50;
context.shadowOffsetY = 50;
context.shadowBlur = 5;
context.shadowColor = "DarkGoldenRod";
context.strokeStyle = "Gold";
context.strokeRect(200, 200, 100, 120);
}
window.onload = draw_rectangle();
</script>
Why don't you use css3 for this?
Here you might find how to do so : http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
No, You can’t transform the shadow separately from the rectangle.
You can rotate both the rectangle+shadow like this: http://jsfiddle.net/m1erickson/W4fgp/
You could also draw the 2 objects separately, 1 rectangle and 1 rectangle for the “shadow”.
Here is code rotating your rectangle+shadow:
<!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 ctx=canvas.getContext("2d");
ctx.rotate(.6);
ctx.rect(150, 50, 50, 60);
ctx.shadowOffsetX = 50;
ctx.shadowOffsetY = 50;
ctx.shadowBlur = 5;
ctx.shadowColor = "DarkGoldenRod";
ctx.strokeStyle = "Gold";
ctx.stroke();
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
For some reason, if the second canvas in the following code has a height of more than 526 pixels, nothing will draw to it in Chrome. It works fine as long as height < 527, and always works in Firefox. Anyone know what I'm doing wrong? I'm very new to HTML, so sorry if I've missed something.
<!doctype html>
<html>
<head>
<script type="text/javascript">
function init()
{
var canv = document.getElementById("myCanvas");
var ctx = canv.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canv.width, canv.height);
}
</script>
<style type="text/css">
canvas {border: 1px solid black; }
</style>
</head>
<body onload="init()">
<canvas id="mainFrame" width="700" height="700"></canvas>
<canvas id="myCanvas" width="125" height="527"></canvas> <!-- cannot exceed
526 ... WHY? -->
</body>
</html>
I tried this on my chrome v.24.0.1312 on win7 x64 and it works as is, try updating to the latest version of the browser.