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?
Related
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 have to create a circle with a different background color using canvas in html, and on the bottom of it, i wanna make a button that changes the background color of the circle on clicking it and then changes the color back on clicking it again. How do i do that?
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:20px; }
canvas{border:1px solid black;}
</style>
<script>
$(function(){
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
drawCircle(ctx,false);
function drawCircle(context,fill){
context.beginPath();
context.arc(90, 90, 50, 0, 2 * Math.PI);
context.closePath();
context.stroke();
context.fill();
context.fillStyle="green";
}
$("#c1").click(function(){ drawCircle(ctx,true); });
});
</script>
</head>
<body>
<div class="row-fluid">
<div class="span1 offset3">
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>
<div class="span1">
<br/><a id="c1" href="#" style="margin-left:70px;">click</a>
</div>
</div>
</body>
</html>
You can not magically change the (background) color of any component drawn to the canvas.
You need to draw a new circle with a different color and override the previous circle.
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.
This makes me crazy. I simply would like html2canvas capture an image
I have that:
<div id="post" class="xx">Déposer</div>
<canvas width="500" height="200"></canvas>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
html2canvas($("#post"), {canvas: canvas}).then(function(canvas) {
var img = canvas.toDataURL()
window.open(img);
});
</script>
The result is this image:
The button appear at the bottom of the canvas, and I would like to keep only the button, any idea on how to get only the button ?
If I change the size of the canvas, then the result is like this:
and here is the code of the button :
<div id="post">
<div style="float:left;background:url(g.png);width:21px;height:53px;"></div>
<div id="c" style="float:left;background:url(c.png) repeat-x;height:53px;font-family:arial;text-shadow: -1px -1px rgba(0, 0, 0, 0.3);padding: 12px 20px;font-size: 20px;line-height: 24px;color: rgb(255, 255, 255);text-align: center;vertical-align: middle;text-decoration: none;">Déposer</div>
<div style="float:left;background:url(d.png);width:21px;height:53px;"></div>
</div>
and the files :
which makes this button (no extra css in the page) :
The following code:
<html>
<head>
<style>
canvas {
border: solid red 1px;
}
</style>
</head>
<div id="post">
<div style="float:left;background:url(g.png);width:21px;height:53px;"></div>
<div id="c" style="float:left;background:url(c.png) repeat-x;height:53px;font-family:arial;text-shadow: -1px -1px rgba(0, 0, 0, 0.3);padding: 12px 20px;font-size: 20px;line-height: 24px;color: rgb(255, 255, 255);text-align: center;vertical-align: middle;text-decoration: none;">Déposer</div>
<div style="float:left;background:url(d.png);width:21px;height:53px;"></div>
</div>
<canvas width="500" height="200"></canvas>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
html2canvas($("#post"), {canvas: canvas});
//.then is an invalid function for html2canvas
/*.then(function(canvas) {
var img = canvas.toDataURL()
window.open(img);
});
*/
</script>
</html>
Gives me the following results:
From that I would conclude
html2canvas has a small amount of padding around where it adds the image to canvas
You may have css on your button that may be causing the canvas to push it down farther than you would like
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);