Im doing a project which is web based abc tracing program.In my program,i should have a save button which will convert the drawing in canvas into image any automatically save the image in database.I dont know how to do this.I can convert the drawing into image but i dont know how to save into database.
This is my coding
html
<html>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC:700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Playball" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="cssdrawing.css">
<script src="a.js"></script>
<body>
<div style="background:A5F0FA;padding:10px;padding-bottom:20px">
<h1 style="font-family: 'Playfair Display SC', serif;text-align:center;margin-bottom:10px">Lets Trace!</h1>
<hr style="margin-bottom:15px;padding-top:0px;" width="500px" />
<center>
<div align="center" id="MainDiv" style="background:#FAA5EE;box-shadow:5px 5px 5px silver;padding:10px;max-width:90%;">
<canvas id="painter" height="300px" width="500" style="background: url('./images/vtr.jpg')"></canvas>
<br />
<div class="holder">
<span>Colors:</span>
<input type="button" style="background-color:FF0000;padding:10px 24px" onclick="Color('red')"></button>
<input type="button" style="background-color:0000FF;padding:10px 24px" onclick="Color('blue')"></button>
<input type="button" style="background-color:DE5616;padding:10px 24px" onclick="Color('brown')"></button>
<input type="button" style="background-color:FFFF00;padding:10px 24px" onclick="Color('yellow')"></button>
<input type="button" style="background-color:008000;padding:10px 24px" onclick="Color('green')"></button>
<input type="button" style="background-color:DE168F;padding:10px 24px" onclick="Color('pink')"></button>
<input id="color" type="color" onclick="Color(this.value)" onchange="Color(this.value)"></input>
<br /></div>
<div class="holder">
<span>Thickness:</span>
<input value="30" id="number" min="30" max="100" type="number"></input><br /></div>
<div class="holder">
<span>Other:</span>
<button onclick="Color('white')">Eraser</button>
<button onclick="ClearCanvas()">Clear Canvas</button>
<a id="download" download="img.jpg"><button type="button" onClick="download()">Save</button></a>
</div>
</div>
</center>
</div>
</body>
</html>
Javascript
function Color(a) {
var offset = function(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}
var canvas = document.getElementById("painter");
var context = canvas.getContext("2d");
var draw = false;
var pos = offset(canvas);
canvas.onmousemove = function(e) {
if (draw == false) { return; }
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
console.log(x,y);
context.lineTo(x, y);
context.stroke();
}
canvas.onmousedown = function(e) {
draw = true;
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
context.fillStyle = "red";
context.beginPath();
context.moveTo(x, y);
context.lineWidth= document.getElementById("number").value;
context.strokeStyle=a;
}
canvas.onmouseup = function(e) {
draw = false;
}
}
function ClearCanvas() {
var c=document.getElementById("painter");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,880,300);
}
function Preview() {
var canvas = document.getElementById("painter");
var dataUrl = canvas.toDataURL();
window.open(dataUrl, "", "width=880, height=300");
}
function download(){
var download = document.getElementById("download");
var image = document.getElementById("painter").toDataURL("image/jpg")
.replace("image/jpg", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archive.jpg");
$.ajax({
method: 'POST',
url: 'photo_upload.php',
data: {
photo: photo
}
});
}
Send that dataUrl back to your server with an AJAX post
$.ajax({
type: "POST",
url: "photo_upload.php",
data: {photo : dataUrl}
})
.done(function(respond){console.log("done: "+respond);})
.fail(function(respond){console.log("fail");})
.always(function(respond){console.log("always");})
On the PHP side, save the incoming dataURL to a database:
<?php
$sql="insert into table_name(photo) values(:photo)";
// INSERT with named parameters
$conn = new PDO('mysql:host=localhost;dbname=myDB', "root", "myPassword");
$stmt = $conn->prepare($sql);
$stmt->bindValue(":photo",$_POST["photo"]);
$stmt->execute();
$affected_rows = $stmt->rowCount();
echo $affected_rows;
?>
Related
This code is meant to generate an ID Card with a picture
as the background. What should I use to replace the below line please?
co.fillRect(0.5,75.5,319,164.5)
Here is the full code
var c = document.getElementById('new')
var co = c.getContext('2d')
function save() {
datau = c.toDataURL('image/jpeg;base64;') //.replace("image/png", "image/octet-stream");
//window.location.href=datau
anchor = document.getElementById('download')
anchor.href = datau
anchor.innerHTML = ' Download'
}
function gene() {
sra = document.getElementById('srava').value
if (sra.length || des.length > 0) {
r = confirm("" + sra + ", Do you want to Update ID card?")
if (r == true) {
c = document.getElementById('new')
co = c.getContext('2d')
co.clearRect(0, 0, 320, 240)
init()
co.font = '20px Arial'
co.strokeText(sra, 50, 323)
idnu = Math.random() * 10000
co.font = '0px Arial'
co.fillStyle = '#000000'
co.fillText('ID:' + Math.round(idnu), 200, 100)
youphot = document.getElementById('uploadPreview')
co.drawImage(youphot, 100, 145, 149, 149)
document.getElementById('sav').disabled = false
} else {
document.write('Cancelled!')
}
} else {
alert('Fill the form')
}
}
function init() {
co.fillRect(0.5, 75.5, 319, 164.5)
}
init()
function first() {
co.font = '20px Arial'
co.strokeText(' ', 120, 325)
co.font = '15px Arial'
co.fillStyle = '#000000'
co.fillText(' ', 120, 325)
}
first()
function PreviewImage() {
var prr = new FileReader();
prr.readAsDataURL(document.getElementById("imagefile").files[0]);
prr.onload = function(ev) {
document.getElementById("uploadPreview").src = ev.target.result;
};
};
function rese() {
init()
first()
}
<div class='container'>
<canvas id='new' width='673' height='500' style='border:1px solid #fff;'>
</canvas>
<p>
<button id='sav' type="button" class="btn btn-default btn-sm" onClick=save(); disabled>
<span class="glyphicon glyphicon-floppy-disk"></span> Generate
</button>
</p>
<h3>Generate Membership ID</h3>
You may use blank space <b>" "</b> adjust your <b>Name</b> as you wish <br>
<input type='text' id='srava' placeholder='Your Full Name!' required/>
<p/> Passport Photograph:<br>
<input type='file' id='imagefile' onChange="PreviewImage();" />
<img id="uploadPreview" style="width: 20px; height: 20px:; border-radius: 50px" />
<p/>
<input type='button' id='upd' value='Inscribe!' onClick=gene();>
<input type='button' id='res' value='Reset' onClick=window.location.reload();>
</div>
I want picture as background instead of gradients.
I'am curruently working to make a signature app in laravel using mainly html and javascript, I'am already abled to draw on a pc but I'am not abled to draw on a moble device. So my question is how am I abled to draw on a mobile device?
This app is going to be used for signing off for delivering packages
#extends('layouts.app')
#section('content')
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<div class="card-header">
<h2 class="text-center">Leverings check</h2>
<div class="btn btn-danger">Pagina terug</div>
</div>
<div class="container">
<body onload="init()">
<canvas id="painter" name="painter" width="400" height="200" style="position:absolute;top:53%;left:4%;border:2px solid;"></canvas>
<img id="photo" name="photo" style="position:absolute;top:53%;left:4%;" style="display:none;">
<input class="btn btn-success" type="button" value="Opslaan" id="btn" size=15" onclick="save()" style="position:absolute;top:80%;left:4%;">
<input class="btn btn-danger" type="button" value="Leegmaken" id="clr" size="15" onclick="erase()" style="position:absolute;top:80%;left:4%;">
<table class="table">
<thead class="thead-dark">
<tr>
<td style="width: 10%">Klant</td>
<td style="width: 10%">Klant nummer</td>
<td style="width: 80%">ordernummer</td>
</tr>
</thead>
<tbody>
#foreach($order_nummer as $aftekenens)
<tr>
<td>{{$aftekenens->klant}}</td>
<td>{{$aftekenens->klant_nummer}}</td>
<td>{{$aftekenens->order_nummer}}</td>
</tr>
#endforeach
</tbody>
</table>
<form action="{{route('tekenen.store')}}" method="POST">
#csrf
<div style="position:absolute;top:40%;left:4%;">
<label for="coli">Aantal coli('s):</label> <input type="text" id="coli" name="coli" required>
<br>
</div>
<input type="hidden" name="src_image" value="dataURL" id="src_image">
<input type="hidden" name="photo" id="photo">
<input type="hidden" name="order_nummer" value="<?php echo $aftekenens->order_nummer;?>">
<input class="btn btn-success" type="button" value="Opslaan" id="btn" size="30" onclick="save()" style="position:absolute;top:80%;left:17%;">
<button class="btn btn-primary" type="submit" style="position:absolute;top:85%;left:4%;">toevoegen</button>
<div style="position:absolute;top:45%;left: 4%;">
<label for="ingevulde_naam">Naam:</label> <input type="text" id="ingevulde_naam" name="ingevulde_naam" required>
</div>
<div style="position: absolute;top:50%;left:4%;">
Handtekening hier beneden zetten a.u.b. :
</div>
</form>
</body>
</div>
</html>
<script type="text/javascript">
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
touchX = 0,
touchY = 0,
dot_flag = false;
var x = "black",
y = 2;
function init() {
canvas = document.getElementById('painter');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
canvas.addEventListener("touchmove", touchMove, function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("touchstart", touchStart, function (e) {
findxy('start', e)
}, false);
canvas.addEventListener("touchend", touchEnd, function (e) {
findxy('end', e)
}, false);
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY,);
ctx.lineTo(currX, currY,);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function touchStart() {
getTouchPos();
draw(touchX, touchY);
event.preventDefault();
}
function touchMove(e) {
getTouchPos(e);
event.preventDefault();
draw(touchX,touchY);
}
function touchEnd() {
getTouchPos(e);
event.preventDefault();
draw(touchX, touchY);
}
function getTouchPos(e) {
if (!e)
if(e.touches) {
if(e.touches.length == 1){
var touch = e.touches[0];
touchX=touch.pageX-touch.target.offsetLeft;
touchY=touch.pageY-touch.target.offsetTop;
}
}
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
function erase()
{
ctx.clearRect(0, 0, w, h);
document.getElementById("photo").style.display = "none";
}
function save() {
var dataURL = canvas.toDataURL("image/png");
document.getElementById("photo").style.border = "2px solid";
document.getElementById("photo").src = dataURL;
document.getElementById("photo").style.display = "inline";
document.getElementById("src_image").value = dataURL;
}</script>
Maybe, a proper mobile app will be more appropriate for a such a solution.
Anyway, there are no mouse events in mobile, only touch events.
Please take a look here as a starting point:
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events
And here for a few examples:
https://developers.google.com/web/fundamentals/design-and-ux/input/touch#implement-custom-gestures
I'm trying to change my font size and color in my canvas on a photo. So you have to upload a photo before you're able to add text to the image. After you add the photo and add text, then you're able to change the color and font, but when trying to do so you have to re-submit or the changes are not applied. Any ideas on what is happening? Do I have to re-draw it when they change colors or font sizes? Thanks In advance.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="theText" type="text">
<button id="submit">Draw text on canvas</button>
<br>
<canvas id="canvas" width="1000" height="500" class="playable-canvas"></canvas>
<div id="image_div">
<h1> Choose an Image to Upload </h1>
<input type='file' name='img' id='uploadimage' />
</div>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.filter = 'blur(0px)';
</textarea>
<!-- Change Font Size -->
<div class="radio">
<input type="radio" name="radio" id="size16" onclick="size16()" checked="">
<label for="size16"> Font Size 16 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size20" onclick="size20()" >
<label for="size20"> Font Size 20 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size25" onclick="size25()" >
<label for="size25"> Font Size 25 </label>
</div>
<div class="radio">
<input type="radio" name="radio"id="size30" onclick="size30()" >
<label for="size30"> Font Size 30</label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size35" onclick="size35()" >
<label for="size35"> Font Size 35 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size40" onclick="size40()" >
<label for="size40"> Font Size 40 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size45" onclick="siz45()" >
<label for="size45"> Font Size 45 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size50" onclick="size50()" >
<label for="size50"> Font Size 50 </label>
</div>
<Br>
<!-- Change Color on Text -->
<div class="col-lg-2 col-md-2 col-xs-12">
<div class="radio">
<input type="radio" name="radio" id="black" onclick="BlackText()" checked="">
<label for="radio1"> Black </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="white" onclick="WhiteText()" >
<label for="radio1"> White </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="yellow" onclick="YellowText()" >
<label for="radio1"> Yellow </label>
</div>
<div class="radio radio-primary">
<input type="radio" name="radio" id="blue" onclick="BlueText()" >
<label for="radio3"> Blue </label>
</div>
<div class="radio radio-success">
<input type="radio" name="radio" id="green" onclick="GreenText()" >
<label for="radio4"> Green </label>
</div>
<div class="radio radio-danger">
<input type="radio" name="radio"id="red" onclick="RedText()" >
<label for="radio6"> Red </label>
</div>
<div class="radio radio-warning">
<input type="radio" name="radio" id="orange" onclick="OrangeText()" >
<label for="radio7"> Orange </label>
</div>
<div class="radio radio-purple">
<input type="radio" name="radio"id="purple" onclick="PurpleText()" >
<label for="radio8"> Purple </label>
</div>
</div>
Javscript:
//===========================================================================================================================
// Javascript that loads Image into canvas
//===========================================================================================================================
var drawnImage;
function drawImage(ev) {
console.log(ev);
var ctx = document.getElementById('canvas').getContext('2d'),
img = new Image(),
f = document.getElementById("uploadimage").files[0],
url = window.URL || window.webkitURL,
src = url.createObjectURL(f);
img.src = src;
img.onload = function() {
drawnImage = img;
ctx.drawImage(img, 0, 0);
url.revokeObjectURL(src);
}
}
document.getElementById("uploadimage").addEventListener("change", drawImage, false);
//===========================================================================================================================
// Javascript for input in textbox
//===========================================================================================================================
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
drawImage();
}
reset.addEventListener('click', function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener('click', function() {
textarea.focus();
})
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
//===========================================================================================================================
// Javascript for Moving Text around.
//===========================================================================================================================
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var startX;
var startY;
var texts = [];
var selectedText = -1;
function draw() {
ctx.rect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < texts.length; i++) {
var text = texts[i];
// ctx.fillStyle = "blue";
ctx.fillText(text.text, text.x, text.y);
}
}
function redraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(drawnImage, 0, 0);
draw();
}
function textHittest(x, y, textIndex) {
var text = texts[textIndex];
return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
}
function handleMouseDown(e) {
e.preventDefault();
startX = parseInt(e.clientX - offsetX);
startY = parseInt(e.clientY - offsetY);
for (var i = 0; i < texts.length; i++) {
if (textHittest(startX, startY, i)) {
selectedText = i;
}
}
}
function handleMouseUp(e) {
e.preventDefault();
selectedText = -1;
}
function handleMouseOut(e) {
e.preventDefault();
selectedText = -1;
}
function handleMouseMove(e) {
if (selectedText < 0) {
return;
}
e.preventDefault();
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
var dx = mouseX - startX;
var dy = mouseY - startY;
startX = mouseX;
startY = mouseY;
var text = texts[selectedText];
text.x += dx;
text.y += dy;
redraw();
}
$("#canvas").mousedown(function(e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
handleMouseUp(e);
});
$("#canvas").mouseout(function(e) {
handleMouseOut(e);
});
$("#submit").click(function() {
var y = texts.length * 20 + 20;
var text = {
text: $("#theText").val(),
x: 20,
y: y
};
// ctx.font = "16px verdana";
text.width = ctx.measureText(text.text).width;
text.height = 16;
texts.push(text);
draw();
});
//===========================================================================================================================
// Javascript for Text Size :)
//===========================================================================================================================
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function size16 () {
ctx.font = "16px verdana";
}
function size20 () {
ctx.font = "20px verdana";
}
function size25 () {
ctx.font = "25px verdana";
}
function size30 () {
ctx.font = "30px verdana";
}
function size35 () {
ctx.font = "35px verdana";
}
function size40 () {
ctx.font = "40px verdana";
}
function size45 () {
ctx.font = "45px verdana";
}
function size50 () {
ctx.font = "50px verdana";
}
//===========================================================================================================================
// Javascript for Drop down for Text Color :)
//===========================================================================================================================
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function PurpleText () {
ctx.fillStyle= 'purple';
}
function BlackText () {
ctx.fillStyle= 'black';
}
function YellowText () {
ctx.fillStyle= 'yellow';
}
function OrangeText () {
ctx.fillStyle = "orange";
}
function BlueText () {
ctx.fillStyle= 'blue';
}
function WhiteText () {
ctx.fillStyle = "white";
}
function GreenText () {
ctx.fillStyle= 'green';
}
function RedText () {
ctx.fillStyle = "red";
}
You have either to draw again the canvans or draw (refresh) it continuosly every xxx milliseconds.
I am making a simple Lissajous Figure Generator in JS.
I cannot get working displaying current slider values in html code.
Here's the complete code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset="UTF-8">
<title>Lissajous figures</title>
<br>
<script type="application/javascript">
var ctx;
var timer = null;
var aS = new Array();
var rad = 189;
var max=3*360, m1=max-1, m2 = max/2;
var iXo=0, iYo=m2/2;
var parN=2, parM=1;
function init() {
var canvas = document.getElementById("field");
if (canvas.getContext) { ctx = canvas.getContext("2d");
sf=Math.sin(3.14159265/m2); cf=Math.cos(3.14159265/m2);
s=-sf; c=cf;
for (i=0; i<m2; i++) {
s1=s*cf+c*sf; c=c*cf-s*sf; s=s1;
aS[i]=Math.round(rad*(1.+s))+1;
aS[i+m2]=Math.round(rad*(1.-s))+1;
}
startAnimation();
}
}
function draw() {
Xo=aS[iXo],Yo=aS[iYo];
ctx.beginPath();
ctx.moveTo(Xo,Yo);
for (j=max; j>0; j--) {
iX=(iXo+parM) % max; iY=(iYo+parN) % m1;
X=aS[iX]; Y=aS[iY];
ctx.lineTo(X,Y);
iXo=iX; iYo=iY; Xo=X; Yo=Y;
}
ctx.clearRect (0, 0, 500, 500);
ctx.stroke();
ctx.strokeStyle="green";
ctx.lineWidth = 3;
}
function startAnimation() {
setInterval(draw,0);
}
</script>
</head>
<h1>Lissajous Figure Generator</h1>
<br>
<body onload="init();" bgcolor="black">
<center><canvas id="field" width="400" height="400">
</canvas>
<br>
<br>
<br>
<h2>Choose parameters value using sliders below:</h2>
<p><h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="parM=parseInt(this.value)">
<output name="show_parM_val" id="parM">1</output></h2>
</p>
<p><h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="parN=parseInt(this.value)">
<output name="show_parN_val" id="parN">2</output></h2>
</p>
</center>
</body>
</html>
How to make the output value working? What should be the correct ID?
I am talking about code fragment below:
<h2>Choose parameters value using sliders below:</h2>
<p><h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="parM=parseInt(this.value)">
<output name="show_parM_val" id="parM">1</output></h2>
</p>
<p><h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="parN=parseInt(this.value)">
<output name="show_parN_val" id="parN">2</output></h2>
You're problem is your setting global scope variables in your slides, but using local variables in your code, check this updated working example:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset="UTF-8">
<title>Lissajous figures</title>
<br>
<script type="application/javascript">
var ctx;
var timer = null;
var aS = new Array();
var rad = 189;
var max = 3 * 360,
m1 = max - 1,
m2 = max / 2;
var iXo = 0,
iYo = m2 / 2;
parN = 2;
parM = 1;
function init() {
var canvas = document.getElementById("field");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
sf = Math.sin(3.14159265 / m2);
cf = Math.cos(3.14159265 / m2);
s = -sf;
c = cf;
for (i = 0; i < m2; i++) {
s1 = s * cf + c * sf;
c = c * cf - s * sf;
s = s1;
aS[i] = Math.round(rad * (1. + s)) + 1;
aS[i + m2] = Math.round(rad * (1. - s)) + 1;
}
startAnimation();
}
}
function draw() {
Xo = aS[iXo], Yo = aS[iYo];
ctx.beginPath();
ctx.moveTo(Xo, Yo);
for (j = max; j > 0; j--) {
iX = (iXo + parM) % max;
iY = (iYo + parN) % m1;
X = aS[iX];
Y = aS[iY];
ctx.lineTo(X, Y);
iXo = iX;
iYo = iY;
Xo = X;
Yo = Y;
}
ctx.clearRect(0, 0, 500, 500);
ctx.stroke();
ctx.strokeStyle = "green";
ctx.lineWidth = 3;
}
function startAnimation() {
setInterval(draw, 0);
}
</script>
</head>
<h1>Lissajous Figure Generator</h1>
<br>
<body onload="init();" bgcolor="black">
<center>
<canvas id="field" width="400" height="400">
</canvas>
<br>
<br>
<br>
<div style="background: #999;">
<h2>Choose parameters value using sliders below:</h2>
<p>
<h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="document.getElementById('parM').innerText = parseInt(this.value);parM=parseInt(this.value)">
<output name="show_parM_val" id="parM">1</output></h2>
</p>
<p>
<h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="document.getElementById('parN').innerText = parseInt(this.value);parN=parseInt(this.value)">
<output name="show_parN_val" id="parN">2</output></h2>
</p>
</div>
</center>
</body>
</html>
This works.
Target the element with the function updateTextInput(val) functions to update the value in the field.
Answer here: HTML5 input type range show range value
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset="UTF-8">
<title>Lissajous figures</title>
<br>
<script type="application/javascript">
var ctx;
var timer = null;
var aS = new Array();
var rad = 189;
var max=3*360, m1=max-1, m2 = max/2;
var iXo=0, iYo=m2/2;
var parN=2, parM=1;
function init() {
var canvas = document.getElementById("field");
if (canvas.getContext) { ctx = canvas.getContext("2d");
sf=Math.sin(3.14159265/m2); cf=Math.cos(3.14159265/m2);
s=-sf; c=cf;
for (i=0; i<m2; i++) {
s1=s*cf+c*sf; c=c*cf-s*sf; s=s1;
aS[i]=Math.round(rad*(1.+s))+1;
aS[i+m2]=Math.round(rad*(1.-s))+1;
}
startAnimation();
}
}
function draw() {
Xo=aS[iXo],Yo=aS[iYo];
ctx.beginPath();
ctx.moveTo(Xo,Yo);
for (j=max; j>0; j--) {
iX=(iXo+parM) % max; iY=(iYo+parN) % m1;
X=aS[iX]; Y=aS[iY];
ctx.lineTo(X,Y);
iXo=iX; iYo=iY; Xo=X; Yo=Y;
}
ctx.clearRect (0, 0, 500, 500);
ctx.stroke();
ctx.strokeStyle="green";
ctx.lineWidth = 3;
}
function startAnimation() {
setInterval(draw,0);
}
function updateTextInput(val) {
document.getElementById('textInput').value=val;
}
function updateTextInput2(val) {
document.getElementById('textInput2').value=val;
}
</script>
</head>
<h1>Lissajous Figure Generator</h1>
<br>
<body onload="init();" bgcolor="black">
<center><canvas id="field" width="400" height="400">
</canvas>
<br>
<br>
<br>
<h2>Choose parameters value using sliders below:</h2>
<p><h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="parM=parseInt(this.value)" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">
</p>
<p><h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="parN=parseInt(this.value)" onchange="updateTextInput2(this.value);">
<input type="text" id="textInput2" value="">
</p>
</center>
</body>
</html>
I am trying to use this(GitHub), Where my "Draw It" is working as expected but "Type It" functionality is not giving me any value in my inputHidden field.
Please, Refer the VF page code and Screenshot for more information :
Draw It
Type It
VF Page Code
<apex:page standardController="Case" extensions="signaturepadCaseController">
<apex:includeScript value="{!URLFOR($Resource.jQuery,'js/jquery-1.6.2.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.signature,'/signature/jquery.signaturepad.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.signature,'/signature/json2.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.signature,'/signature/jquery.signaturepad.css')}" />
<form method="post" action="#" class="sigPad">
<label for="name">Print your name</label>
<input type="text" name="name" id="name" class="name"/>
<p class="typeItDesc">Review your signature</p>
<p class="drawItDesc">Draw your signature</p>
<ul class="sigNav">
<li class="typeIt">Type It</li>
<li class="drawIt">Draw It</li>
<li class="clearButton">Clear</li>
</ul>
<canvas class="pad" width="198" height="55" id="signatureCanvas1"></canvas>
<div class="sig sigWrapper">
<div class="typed" id="typeit">
</div>
<canvas class="pad" width="198" height="55" id="signatureCanvas"></canvas>
<input type="hidden" name="output" class="output" id="hidden"></input>
</div>
<input type="button" onclick="saveSignature();" value="Accept" class="btn" target="_parent" />
</form>
<script>
// $('.sigPad').signaturePad(options);
j$ = jQuery.noConflict();
var api;
j$(document).ready(function() {
api = j$('.sigPad').signaturePad();
});
var canvas;
var canvas1;
var RecordID = '';
function saveSignature() {
canvas = document.getElementById("signatureCanvas");
canvas1 = document.getElementById("signatureCanvas1");
// if(j$('#hidden').val() == ''){
// alert('Please draw your signature');
// }
// else{
RecordId = '{!caseId}';
var imgData;
typeSign = j$('#typeit').text();
if (typeSign != '') {
var ctx = canvas1.getContext("2d");
ctx.fillText(typeSign, 10, 10);
}
imgData = canvas1.toDataURL("image/jpeg");
imgData = imgData.split(',')[1];
console.log('---'+imgData);
strDataURI = imgData;
SignaturePad.signaturepadCaseController.saveSignature(strDataURI, RecordId, handleResult);
// }
}
function handleResult(result) {
if (result.indexOf('success:true')) {
//window.top.location = '/{!Case.id}';
} else {
alert(result);
}
}
</script>
</apex:page>
The output variable is only set when drawing a signature. When typing a signature the canvas isn't drawn to and instead a div with the text in is overlaid to create the effect. You can see more details issue in the project's issue tracker with a possible solution if you're okay with forking the code.