I want to apply an image filter using Fabric.js but I'm unable to. I'm a beginner with Fabric, but here is the code which I'm currently using:
$(document).ready(function(){
var canvas = new fabric.Canvas('mon_canvas');
fabric.Image.fromURL('img/appart.jpg', function(img) {
img.filters.push(new fabric.Image.filters.Sepia());
img.applyFilters(canvas.renderAll.bind(canvas));
canvas.add(img);
});
});
<body>
<canvas id="mon_canvas" width="800" height="500" style="border:1px dotted black;"></canvas>
<img src="img/appart.jpg" id="my-image" style="visibility:hidden;">
</body>
<script type="text/javascript" src="fabricJS/dist/fabric.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
I have also imported the following scripts:
fabricJS/dist/fabric.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js
Any suggestions would be helpful.
Related
I want to insert desmos calculator into html5 canvas or into fabric.js
Now I insert desmos calculator below canvas^
var canvas = new fabric.Canvas('drawarea');
var elt = document.getElementById('calculator');
var calculator = Desmos.GraphingCalculator(elt);
calculator.setExpression({ id: 'graph1', latex: 'y=x^2' });
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<script src="https://www.desmos.com/api/v1.6/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
<canvas width="800" height="800" id="drawarea" style="border: 1px solid red;float: right">
</canvas>
<div id="calculator" style="width: 600px; height: 400px;"></div>
How should I solve my problems inserting desmos into canvas?
I have a 3 kiddie games . All of them is tracing/sketching. The game is to sketch lines, letters and numbers.
I already started the sketching the lines and I used sketch.js from http://intridea.github.io/sketch.js/ , which is not really 100% working.
Now my question is, how to do it through letters and numbers.
I have created a sample but it's not really working. So the game is like this. there's a letter 'A', then the user(kid) will trace that A. But in my sample, the letter will gone. So if the user had already traced/sketch it, the "next" button will appear.
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://intridea.github.com/sketch.js/lib/sketch.min.js"></script>
<canvas id="myCanvas" width="200" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "150px Arial";
ctx.strokeText("A",20,200);
$('#myCanvas').sketch({
defaultColor: "#ff0000",
defaultSize: 10
});
</script>
</body>
</html>
I've just started to learn easeljs. I have tried to create a rectangle which will follow the mouse coordinates, but it is not working. What's wrong here and how it can be fixed?
fiddle
<html>
<head>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="easeljs.js"></script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500" style="border:1px solid black;"></canvas>
<script>
function init(){
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
var stage=new createjs.Stage(canvas);
var shape=new createjs.Shape();
shape.graphics.beginFill('red').drawRect(300,200,40,40);
stage.addChild(shape);
createjs.Ticker.addEventListener("tick",tick);
function tick(event){
shape.x=stage.mouseX;
shape.y=stage.mouseY;
stage.update(event);
}
}
window.onload=init;
</script>
</body>
</html>
You have set the x and y of your rectangle to be 300 and 200 respectively, so if you set those to 0, then the rectangle will start in the right place and follow the mouse as expected.
shape.graphics.beginFill('red').drawRect(0,0,40,40);
I'm using a html 5 to draw a line on canvas with a button.
Does anybody know why?
<!DOCTYPE html>
<html>
<body onload="">
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<button name="draw" onclick="drawLine()">Draw Line</button>
<script type="text/javascript" src="canvashtml5.js" ></script>
</body>
</html>
darwLine function is on the external javascript as canvasHtml5.js:
function drawLine(){
var canvas = document.getElementById(myCanvas);
var context = canvas.getContext("2d");
context.moveTo(0,0);
context.lineTo(300,150);
context.stroke();
}
myCanvas
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FFFF00";
ctx.fillRect(0,0,150,75);
}
I forgot to put myCanvas to quot like this: "myCanvas".
this var canvas = document.getElementById(myCanvas); must be like var canvas = document.getElementById("myCanvas");
Alternative:
Add an event listener to your button like so:
document.getElementById('drawLineBtn').addEventListener('click', drawLine, false);
This will cut down on your work in the future. See http://jsfiddle.net/kbXAN/23/
I would like to create a button that when clicked a static image is displayed as the html canvas elements background?
How can I go about doing this?
Not sure if a stylesheet switcher is the right direction? Maybe there is a smarter solution?
Try this
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnSet').click(function(){
$('#canvas').css("background","url('plant1.jpg')");
});
});
</script>
</head>
<body>
<canvas id="canvas" width="500" height="200">
</canvas>
<br/>
<button id="btnSet">Set Canvas BG</button>
</body>
</html>
if all you want to do is display an image, you might as well use an img tag:
<script>
function() setImage() {
document.geTElementById("myImage").src = "myImage.jpg";
}
</script>
<input type="button" value="Set Image" onclick="setImage()"/>
<img id="myImage"/>
make sure myImage.jpg actually points to your image offcourse.