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
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.
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;
?>
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>
For this project, we're working with canvas. I need to create some buttons, and when you click on the buttons, the corresponding function should be called. These functions will then draw something in the canvas. However, my code isn't working. The buttons and the canvas themselves appear, but nothing draws when you click on the buttons. Are there any errors?
<script>
function drawCircle(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
}
function drawLine(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
}
function drawRectangle(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
}
function drawImage(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
}
function drawText(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<input type="button" onclick="drawCircle();" value="Draw Circle">
<input type="button" onclick="drawLine();" value="Draw Line">
<input type="button" onclick="drawRectangle();" value="Draw Rectangle">
<input type="button" onclick="drawImage();" value="Draw Line">
<input type="button" onclick="drawText();" value="Text">
<input type="button" onclick="drawGradient();" value="Gradient">
<input type="button" onclick="scale();" value="Scale">
</body>
</html>
I tried your code in CodePen and the buttons for which you've implemented the function work just fine. Does your console show any errors?