FabricJS 'freeDrawingBrush' not working on touchscreen - javascript

Code works fine on desktop but for some reason not on mobile (iOS or Android).
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.12/fabric.min.js"></script>
</head>
<body>
<div class="canvas-container" style="width: 500px; height: 500px; position: relative; user-select: none;">
<canvas id="c" width="500" height="500" style="border: 1px solid rgb(170, 170, 170);"></canvas>
</div>
<button id="clear" type="button">Clear</button>
<script>
// Free draw
var canvas = new fabric.Canvas('c');
canvas.freeDrawingBrush.width = 5;
canvas.isDrawingMode = true;
// Clear canvas
document.getElementById('clear').addEventListener('click', function(){
canvas.clear();
})
</script>
</body>
</html>
Code is based on this example which does work on mobile http://jsfiddle.net/MartinThoma/B525t/
I can see the canvas and button on mobile but touching the screen just moves the page!

This is problem with Fabric.js build configurations, please check below documentation to enable gestures control in builder, as by default it's not added and Fabric.js does that by adding Event.js lib which depends on "Interaction" module.
Also do refer to this thread to get idea:
Fabric.js Mobile Touch Issue
And one more thing Fabric.js release the updated version with some additional touch screen issues fixed, please check with updating your lib.
Fabric.js Changelog Version 5.0.0
You can get the Fabric.js customized build from here as per your need:
Fabric Get Build

Related

Media query for iPhone and iPad not working with canvas html5

I'm using a canvas html5 overlapping my web page.
<div id="wrapper">
<div id="copy">
<div id="text">
<p><span class="name">title</span><br>
</div><!--text-->
</div><!--copy-->
<div class="info">
<p><span class="holding">text</span></p>
</div><!--info-->
</div><!--wrapper-->
<div id="container">
<canvas id="canvasTop" width="512" height="512" onMouseDown="handleMouseDown(event)" onmousemove="handleMouseMove(event)" onMouseup="handleMouseUp(event)" onmouseout="handleMouseOut(event)"></canvas>
</div><!--container-->
I'm trying to hide the canvas on mobile devices through media query.
#media screen and (max-width: 1024px){
#container {
display:none;
}
}
It works when I resize the screen on my desktop, both on Chrome and Safari, but not on my iPhone!
I've tried to find a solution but with no luck.
UPDATE
Media query works only on desktop on resize. When I resize the window to a smaller size and I reload the page, this shows the canvas until I resize the window again. I then realised that the issue is due to the fact that I show the canvas on load through javascript
window.onload = function() {
InitCanvas();
var canvas = document.getElementById("canvasTop");
$("#canvasTop").onmouseup = handleMouseUp;
$("#canvasTop").onmousedown = handleMouseDown;
$("#canvasTop").onmouseout = handleMouseOut;
$("#canvasTop").onmousemove = handleMouseMove;
}
I'm not sure how to stop this on mobile though.
Have you added the viewport element in your <head>?
<meta name="viewport" content="width=device-width, initial-scale=1">
Sidenote: I would make the HTML a little more semantic instead of using div’s for every element. see:
https://www.w3schools.com/html/html5_semantic_elements.asp

How to use fabricjs

Hy
I'm very new to canvas, I'm trying to learn how to use fabricjs but I can't get even the very basic example to work and it's quite frustrating.
I downloaded the fabricjs-1.4.8.zip file and the only file I'm using is dist/fabric.min.js,
here is my html code
<html>
<head>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="fabric.js-1.4.8/dist/fabric.js"></script>
<script tye="text/javascript" src="test.js"></script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
</body>
</html>
In first place I didn't include jquery, but after seeing many examples looked like that could do the trick, but it didn't for me, maybe I'm including a wrong version?
and this is my test.js file
var canvas = new fabric.Canvas('myCanvas');
// create a rectangle with angle=45
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);
I can se the border of my canvas element, but no rectangle inside.
Can someone see what I'm doing wrong? thanks
It looks like your canvas is 200 x 100. But you're trying to draw a rectangle 100 pixels from the top. Your code probably works, but the rectangle doesn't show up because it's drawn at the bottom of the canvas. Try changing this line
top: 100
to this:
top: 0
UPDATE
If this doesn't work at first, it could be because the DOM hasn't loaded before your script runs. You can put your code in a jQuery document ready listener like so:
$(document).ready(function(){
//Your code here...
});
This will ensure that the canvas element is actually ready to be used by the time your script fires. Best of luck!

Touchmove doesn't work with Google apps scripts html service

I'm trying to get touchmove events to register with a simple web app written using Google apps scripts html service so that I can make simple web apps that function on the iPad as well as on a desktop.
All I do is first load a web page, which works as expected:
function doGet() {
return HtmlService.createHtmlOutputFromFile('test page');
}
Then I created a simple canvas on the html page:
<html>
<canvas id="canvas" width="200" height="200" style="border:1px solid #000000;">
</canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font = "bold 12px sans-serif";
ctx.fillStyle="black";
ctx.fillText("TEST",50,50);
canvas.addEventListener("touchmove",testme,false);
function testme(e) {
e.preventDefault();
alert("testme");
}
</script>
</html>
This is just the latest variant I have tried. Binding click or mousedown or mousemove all work fine in this example on a desktop. However, trying with touchstart or touchmove don't do anything on an iPad. I have tested with both Chrome and Safari on the iPad.
I have also tried adding something like:
document.addEventListener("touchmove",doPreventDefault,false);
And have a simple function that calls preventDefault(), but that didn't help either.
Am I doing something wrong, or do I have to do something different because it is google apps script html service?
I have now tried with jQuery (just read up on how to do it) but it still doesn't seem to work right on the iPad:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<p>Test</p>
<br><br>
</body>
<canvas id="canvas" width="200" height="200" style="border:1px solid #000000;">
</canvas>
<script>
$(document).ready(function() {
$("#canvas").bind('touchstart',function(e) {
alert("Hello world!");
});
$("p").mousedown(stuff);
$('#canvas').touchmove(onMove);
});
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font = "bold 12px sans-serif";
ctx.fillStyle="black";
ctx.fillText("TEST",50,50);
function onMove(e) {
alert("testing");
}
function stuff(e) {
alert("Stuff");
}
</script>
</html>
The mousedown event works fine, and it event works with a touch - in fact, it seems mousedown and mouseup correlate work with touches on the iPad. But mousemove doesn't work and neither does touchmove or touchstart or touchend. I have tried with bind and more directly as seen above.
Is there something I'm doing wrong to make this work?
You can add a feature request on the Caja issue tracker to whitelist those events. They currently are not on the whitelist.
Read the htmlservice docs.
You cant manipulate the dom unless you use a caja-compatible way like jquery.

How can I play a short sound effect in a javascript app?

I am finalizing the first version of my javascript app, and I would like to add sound effects. What is the recommended way to play a short sound (mp3 or wav or other format) using javascript in a web browser? I have ten sounds that I would like to have pre-loaded and able to play during application execution.
I've created this small test app and can't get the audio to play. Maybe someone can show me where I'm going wrong:
<html>
<head>
<title>Sound Test</title>
<script type="text/javascript" src="raphael.js"></script>
</head>
<body>
<div id="debugPane" style="width: 300px; height: 500px; float: left; background-color: #EEEEEE; margin-left: 10px; border-style: solid; border-width: 1px;"></div>
<script type="text/javascript">
try {
var snd = new Audio("mp3/1.mp3");
alert(snd.src);
snd.play();
} catch (err) {
document.getElementById("debugPane").innerHTML += "" + err.message;
}
</script>
</body>
</html>
The correct file is being chosen. However, when I point to a file that doesn't exist, I don't get any exception. The file happily reports what its src is even though it's not actually on my filesystem.
function playSound(soundfile) {
document.getElementById("dummy").innerHTML =
"<embed src='"+soundfile+"' hidden='true' autostart='true' loop='false' />";
}
where dummy is a hidden div somewhere on your page.
It ended up working the whole time in Chrome and Safari in Windows and Mac. My dev box was a Chromium/Ubuntu environment, which either is not supported, or my sound is misconfigured. In fact, it doesn't work in Ubuntu with any browser so far.

Drawing HTML to a Canvas

With the advent of the new HTML5 Canvas, I was wondering if it's possible to draw a HTML section onto the canvas?
The idea is to take a piece of existing HTML code (from the same page, or defined elsewhere) and turn it into graphics.
Something like:
htContext.drawElement(document.getObjectByID("someObj"),0,0);
Firefox has proprietary method drawWindow. With it you can draw the whole document on the canvas. But only in Firefox unfortunately. And also due to security issues you need permissions from the user to do it. So it's suitable only for some kind of internal project.
Here is the sample test page:
<!DOCTYPE html>
<html>
<head>
<title>drawWindow</title>
<script>
window.onload = function(){
netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
document.getElementById('canvas').getContext('2d').drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
}
</script>
</head>
<body>
<h1>Test</h1>
<canvas id="canvas"></canvas>
</body>
</html>

Categories

Resources