html5 canvas transform shadow - 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>

Related

To fade only a part of a image in html

I have an image and I want to fade the central circular portion of the image to be shown clear and the rest of the portion to be faded.
I tried with canvas as well as by taking two divs and making one of them fade,
but not working.
Following is the pattern i need, with the area out of the circle to be faded. Please Help!!
Here's a starting point for you to get an image that's clear center and fade-to-color outside:
position 2 canvases -- one on top of the other
draw the image on the bottom canvas
fill the top canvas with your color (blue,etc)
use a combination of scaling, shadowing and compositing to "reveal" the image underneath
Demo: http://jsfiddle.net/m1erickson/HtL4P/
Example code:
<!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{position:absolute;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var img=new Image();img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/landscape2.jpg";
function start(){
canvas.width=canvas1.width=img.width/3;
canvas.height=canvas1.height=img.height/3;
ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width/3,img.height/3);
ctx1.fillStyle="dodgerblue";
ctx1.fillRect(0,0,canvas1.width,canvas1.height);
ctx1.save();
ctx1.scale(3,1);
ctx1.globalCompositeOperation="destination-out";
ctx1.arc(-100,120,40,0,Math.PI*2);
ctx1.shadowColor="white";
ctx1.shadowBlur=60;
ctx1.shadowOffsetX=500;
ctx1.fill();
ctx1.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=356 height=237></canvas>
<canvas id="canvas1" width=356 height=237></canvas>
</body>
</html>

save functionality on a webpage that will present clicked xy points as text?

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>

filltext without coordinates

so i have made a circle in the canvas, and i'm trying to have a line of text in it.
the problem is, the filltext code line generates the text at a particular given coordinate, but i dont want that.
is there a way to have the line of text stay inside the circle?
var programFill = function ( context ) {
context.beginPath();
context.arc( 0, 0, 1, 0, PI2, true );
context.font="20px Georgia";
context.fillText("Hello World!",10,50);
context.closePath();
context.fill();
}
Draw filled text inside a circle
Here's an example of how to put text inside a circle: http://jsfiddle.net/m1erickson/BUkKt/
Notice context.beginPath() is called twice because you are doing 2 fills. The first to draw the filled circle and the second to change the fill color and draw the filled text.
And here is the code:
<!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:10px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas1=document.getElementById("canvas");
var context=canvas1.getContext("2d");
context.beginPath();
context.fillStyle="yellow";
context.strokeStyle="black";
context.font="20px Georgia";
context.lineWidth=10;
context.arc(100,100, 75, 0 , 2 * Math.PI, false);
context.fill();
context.beginPath();
context.fillStyle="red";
context.fillText("Hello World!",40,100);
context.fill();
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas><br/>
</body>
</html>

Can't draw on canvas of a certain size

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.

HTML: Preventing marquee area from being empty?

There's a marquee that goes up.
When the text is done scrolling (before it comes up again), the marquee area becomes empty for about 2 seconds and then then comes back up again.
Is there any way to prevent it from being empty, and making the first line come up before the last one goes up?
http://jsfiddle.net/WArVQ/2/
You can do it using JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Scroll demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="container" style="position: absolute; width: 200px; height: 200px; background-color: grey">
</div>
<script type="text/javascript">
var maxy = 200; // adjust
var lineHeight = 17; // adjust
var lines = new Array("line1", "line2", "line3");
var textDivs = new Array(lines.length);
for(var i=0;i<lines.length;i++) {
var divx = document.createElement("div");
var divxText = document.createTextNode(lines[i]);
divx.style.top=String(maxy-(lines.length-i)*lineHeight)+"px";
divx.style.position="absolute";
divx.appendChild(divxText);
textDivs[i] = divx;
document.getElementById("container").appendChild(divx);
}
window.setInterval("scroll()", 50);
function scroll() {
for(var i=0;i<textDivs.length;i++) {
var divx = textDivs[i];
var y = parseInt(divx.style.top);
y = y-1;
if(y<0) y = maxy-lineHeight;
divx.style.top =String(y)+"px";
}
}
</script>
</body>
</html>