Drawing triangle coordinates from form, canvas, JS

**ninigi** · 04-06-2016, 08:10 PM

Hello Everybody!
I've asked similar question and some good souls tried to help but unfortunately failed.

I was given an assignment by my teacher; I am to collect data from a html form and then print a tringle using the given coordinates. Unfortunately my code is not working and I don't know where the mistake is. Any ideas? It's my first JS program btw so please excuse my imperfection.

Here's the code: https://jsfiddle.net/n07engyt/4/

Thanks in advance!

**Sempervivum** · 04-06-2016, 10:13 PM

Have a look at the console, it tells you what's wrong:

Syntax error here:

Code:

function testX3())

coordinate is undefined here

Code:

		function testX1()
		{
			var welcome_parra = document.getElementById('form');
			var coordinate = document.getElementById('wX1')
			return coordinate.value;
		}

The correct ID is wierzcholekX1
... and so on.

This works:
https://jsfiddle.net/n07engyt/8/

I recommend having a look at jCanvas, this makes handling canvas much easier.

**coothead** · 04-07-2016, 08:55 AM

Hi there ninigi,

and a warm welcome to these forums.

Have a look at this example, which has a little more functionality...

Code:


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color:#f9f0f0;
 }
#coordsForm {
    display:inline-block;
    padding:1em;
    margin-bottom:1em;
    border:0.1em solid #999;
    border-radius:1em;
    background-color:#fff;
    box-shadow:inset 0 0 1em #999, 
        0.25em 0.25em 0.25em #999;
    text-align:center;
 }
#coords div {
    margin:0.4em 0;
 }
#coords label,#coords input {
    margin-right:0.4em;
 }
#info {
    margin-top:0.4em;
    color:#f00;
 }
#canvas {
    display:block;
 }
.warning{
    background-color:rgba(255,0,0,0.5);
    color:#fff;
 }
</style>

</head>
<body> 

<form id="coordsForm" action="#">
<div id="coords">
<div>
 <label for="inp0">x0:</label><input id="inp0" type="text">
 <label for="inp1">y0:</label><input id="inp1" type="text">
</div><div>
 <label for="inp2">x1:</label><input id="inp2" type="text">
 <label for="inp3">y1:</label><input id="inp3" type="text">
</div><div>
 <label for="inp4">x2:</label><input id="inp4" type="text">
 <label for="inp5">y2:</label><input id="inp5" type="text">
</div>
</div>
 <input id="but" type="button" value="create triangle">
 <input id="clear" type="reset" value="clear inputs">
<div id="info"></div>
</form>

<canvas id="canvas" width="250" height="250"></canvas>

<script>
(function() {
   'use strict';
   /* jshint browser: true */

   var c,ctx,d=document,
       crs=d.getElementById('coords').getElementsByTagName('input'),
       inf=d.getElementById('info'),
       canvas=d.getElementById('canvas');

if(canvas.getContext){
   ctx=canvas.getContext('2d');
 }
for(c=0;c<crs.length;c++) {
    crs[c].disabled=false;
 }
   d.getElementById('coordsForm').reset();
   d.getElementById('but').onclick=drawTriangle;
   d.getElementById('clear').onclick=tidyup;

function drawTriangle(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
for(c=0;c<crs.length;c++) {
if((crs[c].value<0)||(crs[c].value==='')||(isNaN(crs[c].value))) {
   crs[c].className='warning';
   inf.innerHTML='all coordinates are required';
   return;
  }
else {
   crs[c].className='';
   inf.innerHTML='';
  }
 }
   ctx.beginPath();
   ctx.moveTo(crs[0].value,crs[1].value);
   ctx.lineTo(crs[2].value,crs[3].value);
   ctx.lineTo(crs[4].value,crs[5].value);
   ctx.closePath();
   ctx.fillStyle='rgba(255,0,0,0.5)';
   ctx.fill();
   ctx.stroke();
for(c=0;c<crs.length;c++) {
    crs[c].disabled=true;
  }
 }

function tidyup() {
   ctx.clearRect(0,0,canvas.width,canvas.height);
   inf.innerHTML='';
for(c=0;c<crs.length;c++) {
   crs[c].className='';
   crs[c].disabled=false;
  }
 }
})();
</script>

</body>
</html>

coothead

Thread: Drawing triangle coordinates from form, canvas, JS

Thread Tools

Rate This Thread

Drawing triangle coordinates from form, canvas, JS

Tags for this Thread

Posting Permissions