I am trying to make a logo to have smoke all over it. I bummped into this jsfiddle:
http://jsfiddle.net/jonnyc/Ujz4P/5/ and now I am trying to change it so it goes over a logo
however it doesn't want to work.
index.html
<html>
<head>
<title>Smoke</title>
<style>
.container
{
width: 360px;
height: 200px;
border: 2px solid black;
}
</style>
<script type="text/javascript" src="smoke_effect.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container">
<img id="smoke-logo" src="images.jpg"/>
</div>
</body>
</html>
and all of the javascript on the left hand side in the jsfiddle I paste it in a docment called smoke_effect.js however I haven't change the code at all I just change the tag from "myCanvas" to "smoke-logo".
I made 2 big changes to your fiddle
I changed the CSS to read:
#myCanvas{
background:transparent;
}
and the draw function, instead of filling with semi-transparent black, just clears canvas.
// The function to draw the scene
function draw() {
// Clear the drawing surface and fill it with a black background
//context.fillStyle = "rgba(0, 0, 0, 0.5)";
//context.fillRect(0, 0, 400, 400);
context.clearRect(0,0,400,400);
// Go through all of the particles and draw them.
particles.forEach(function(particle) {
particle.draw();
});
}
This will allow you to put an image behind the smoke.
Related
so basically I have an editor in which I am using FabricJS and React, the issue I am facing is regarding to the export, everytime I try to export in image format, the image has a rare botton and right grey border inside the image.
I use the following code for downloading and find no issues:
canvas {
border: 1px solid #C00;
}
.container{
}
.container button {
border: 1px solid blue;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fabric</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
</head>
<body>
<div class="container">
<canvas id="c" ></canvas>
<br>
<button id="downloadBtn">Convert Canvas into Image</button>
<br>
<span>Pls click here after clicking on Download Canvas button</span>
<a href="#" > Download Image</a>
</div>
<script>
// create a wrapper around native canvas element (with id="c")
const canvas = new fabric.Canvas("c", {
width: 200,
height: 200,
backgroundColor: "#ffffff",
});
// create a rectangle object
const rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
// "add" rectangle onto canvas
canvas.add(rect);
document.getElementById("downloadBtn").addEventListener("click", function(){
const data = canvas
.toDataURL();
const a = document.createElement("a")
a.href = data
a.download = `drawing.png`
a.click();
document.getElementsByTagName("A")[0].setAttribute("href", data);
})
</script>
</body>
</html>
Can anyone pls lend me hand since I can't find what can be causing this issue?
Steps to reproduce with attached demo:
Click first on "convertcanvas into image" button
click on the download image ( it is under an tag)
right click on the red rect and select "save image as"
after having been saved into your files, open it and you'll see the borders on the right and bottom
Use can just use css like that=>
Canvas{border:0;}
I believe the grey border you're seeing is a quirk of the photo viewer. My guess is you're using the Windows 10 Photos app for which others have noticed the same grey line (see here)
Try opening your saved image in a different program like Chrome and it should look correct.
I have an animation (made with Adobe animate CC) that I have included into my html file. I am trying to change its original script in order to start the animation from the beginning only when it becomes visible in the viewport of the browser. Unfortunately, I searched widely but couldn't make any of the solutions I found worked for my case.
This is the original code I'm trying to change:
<html>
<head>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container,
fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp=AdobeAn.getComposition("07578064E5C140B781D146A1AE4968A3");
var lib=comp.getLibrary();
handleComplete({},comp);
}
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
exportRoot = new lib.Water_illustrazione_revista_scrollplay();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
//follow a code to support hidpi screens and responsive scaling.
</script>
</head>
<body onload="init();" style="margin:0px;">
<div id="anchor5" class="Anime_p">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1280px; height:700px">
<canvas id="canvas" width="1280" height="700" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1280px; height:700px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</div>
</body>
</html>
You simply need to export the animation as stopped at first and then check when the div comes in browser view. Whenever it does, start the animation.
Add exportRoot.stop(); in the end of fnStartAnimation();
Check for visibility of your animation div in browser as explained here - How to tell if a DOM element is visible in the current viewport?
Whenever the condition is satisfied, add the code - exportRoot.play();
I want to add a border to my HTML CANVAS and thought that the following code would do that.
Question: How can I put a border around the Canvas in the code and in the HTML code>
Code:
context.fillStyle = 'red';
context.strokeStyle = 'black';
The following code is the whole HTML file. It wasn't all that large so I just pasted it all in.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapter 4 Example 1: Image Basics</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
}else{
var theCanvas = document.getElementById('canvas');
var context = theCanvas.getContext('2d');
context.fillStyle = 'red';
context.strokeStyle = 'black';
context.font = '20pt Verdana';
context.fillText('Some text', 50, 50);
context.strokeText('Some text', 50, 50);
context.fill();
context.stroke();
}
var spaceShip=new Image();
spaceShip.src="ship1.png";
spaceShip.addEventListener('load', eventShipLoaded , false);
function eventShipLoaded() {
drawScreen();
}
function drawScreen() {
context.drawImage(spaceShip, 10, 10);
context.drawImage(spaceShip, 50, 50);
context.drawImage(spaceShip, 150, 50);
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
</body>
</html>
You could use CSS. Here is an example. http://jsfiddle.net/amER5/1/
#canvas {
height: 100px;
width: 100px;
border: 1px solid blue;
}
or inline:
<canvas id="canvas" width="500" height="500" style="border: 1px solid black;">
Your browser does not support the HTML 5 Canvas.
</canvas>
If you want to embed the border in the canvas then simply call:
ctx.strokeRect(0, 0, theCanvas.width, theCanvas.height);
Demo
after setting strokeStyle and optionally lineWidth. In this case you would have to update the border each time you clear the canvas.
If you simply want a border around the canvas and it is not important to be a part of the canvas' bitmap itself (in case you want to save out images) simply apply CSS to the canvas element:
theCanvas.style.border = '1px solid #000'; // adjust as needed
Demo
or directly with CSS style in the tag or as a CSS rule.
Demo
I would recommend rather though setting the border on the parent element (using a CSS rule) as borders (and padding) can affect mouse positions if adjusted with getBoundingClientRect().
Demo
You should be able to add a border via CSS in the same way you would add a border to anything with CSS:
<canvas style="border:1px solid #000000;" widt...
inline should do.
I'm writing a simple script where the user clicks anywhere in a canvas and there appears a circle.
The script works but not correct. Somehow the cordinates where the click event happens and the circle center don't match. Any ideas why?
Here is the code :
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#special").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
/* var c=document.getElementById("special"); */
var ctx= this.getContext("2d"); /*c.getContext("2d");*/
ctx.beginPath();
ctx.arc(x, y, 10,0, 2*Math.PI);
ctx.stroke();
$('#status2').html(x +', '+ y);
});
})
</script>
<body>
<h2 id="status2">0, 0</h2>
<canvas style="width: 500px; height: 500px; border:1px ridge green;" id="special">
</canvas>
</body>
</html>
You need to add the width and height properties to your canvas element like so: (you have it in style)
<canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="special">
Check out this fiddle:
http://jsfiddle.net/7xQZ2/
Adding the width and height parameters will specify how many pixels your canvas should be. The style one just shows how big it should be displayed (everything on it would get stretched).
The canvas element needs the height and width tags. It's kind of odd, especially for HTML5 notation.
Try adding this in your document ready-statement (before your canvas drawing-code) and jQuery will add them for you based on your CSS styles.
$('#special').attr('height', $('#special').css('height'));
$('#special').attr('width', $('#special').css('width'));
The plus-side of this method over using manual addition of the attribute-values is that you only need to store the dimensions once, ruling out future confusion if you would use external stylesheets;
CSS
#special {
width: 500px;
height: 500px;
border:1px ridge green;
}
HTML
<canvas id="special">Not supported</canvas>
JSfiddle
Lets try something more simple. I have a pink box and I want it to turn from pink to red when the user mouseovers it. This function is not working. Can anyone help me fix the code or find the error?? They have told me if I can't get this working I am going to be let go!!
<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>
<style type="text/css">
#input
{
margin-top:-200px;
}
</style>
</head>
<body style="background-color:black";>
<div id="draw-here-raphael" style="height: 400px; width: 400px; background: #666; z-index:0;">
</div>
<div id="input" style="z-index:99;" >
<input type="text" value="0"; style="text-align:right;" /><br />
</form>
</div>
<script type="text/javascript">
//all your javascript goes here
$(function() {
var r = new Raphael("draw-here-raphael"),
// Store where the box is
position = 'left',
// Make our pink rectangle
rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
$("rect").(function(i) {
$("rect").mouseover(function() {
$("rect").attr({"fill": "red"});
});
});
});
</script>
</body>
</html>
why dnt u use css for this
#draw-here-raphael:hover{background-color:Red;}
Or, Use this code instead
$(rect).mouseover(function() {
this.attr({"background-color": "red"});
});
Try changing the $("rect") to just rect
rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
rect.(function(i) {
rect.mouseover(function() {
rect.attr({"fill": "red"});
});
});
However as someone pointed out in a comment it may not work with SVG.
If you have the rect as a div with height and width, fixed position with left and top and a background-color you can just change the css value of background-color on mouseover.
For a div example:
Suppose you have a div with id="pinkBox"
$('#pinkBox').mouseover(function() {
$(this).css('background-color','#ff0000');
});
You will need to position the div too, I'm not sure how the Raphael stuff works, never looked at it personally, but if its fixed positioning then you can emulate this in css with position:fixed; top: some value; left: some value; width: some value; height: some value
Full code:
HTML:
<div id="pinkBox" style="position:fixed; left:20, top:20; width:250; height:300" ></div>
Javascript:
$(document).ready(function() {
$('#pinkBox').mouseover(function() {
$(this).css('background-color','#ff0000');
});
});
Unfortunately if you are not using CSS3 you will not be able to have rounded corners unless you use images. Using CSS3 though you can add rounded corners by adding the following style to the div
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
For simplicity I have added the styles inline on the div, I would suggest making a class though and using the class attribute, keeping your css in a seperate file or in the head of your document.
I changed it around a bit, but what about something like this:
var canvas = Raphael(document.getElementById("draw-here-raphael"));
// Make rectangle pink
var r = canvas.rect(20, 20, 250, 300, 10).attr("fill", "#fbb");
$("#draw-here-raphael").mouseover(function() {
r.attr("fill", "red");
});
http://jsfiddle.net/7PLy9/