Creating stunning visuals with the power of SVG

Question

Creating stunning visuals with the power of SVG

I need to create a graphics editor similar to Paint using SVG for a school project. I have JavaScript code for drawing shapes like circles and lines, but when I try to add them to an onClick function for a button, it doesn't seem to be working.

function drawCircle(position) {
//     var radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2));
//     context.beginPath();
//     context.arc(dragStartLocation.x, dragStartLocation.y, radius, 0, 2 * Math.PI, false);
}

Here's the HTML:

<button onclick="drawCircle()" class="button">Rectangular</button>

javascript html css svg

Answer 1

Answer №1

Welcome to Canvas (html5) Version

Are you looking to incorporate html5-canvas rather than svg into your project?

If so, follow these steps:

Insert a canvas tag within the html document.
Create the drawCircle function as demonstrated in the provided code snippet.

function drawCircle() {
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#003300';
  context.stroke();
}

<button onclick="drawCircle()">Draw Circle</button>
<br />
<canvas id="myCanvas" width="578" height="200"></canvas>

Update:

Check out SVG Version below:

function drawCircle() {
  document.getElementById('svg').innerHTML = '<circle cx="100" cy="100" r="70" stroke="black" stroke-width="5" fill="green" />';
}

<button onclick="drawCircle()">Draw Circle</button>
<br /><br />
<svg height="200" width="578" id="svg"></svg>

With regards to drawing using SVG, it is recommended to utilize a library like svg.js

function drawCircle() {
  var draw = SVG('draw').size(578, 200);
  var circle = draw.circle(70).attr({fill:'green',stroke:'#003300', 'stroke-width': 5, cx:50, cy:50});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.2.5/svg.js"></script>
<button onclick="drawCircle()">Draw Circle</button>
<br /><br />
<div id="draw"></div>

Answer 2

Welcome to Canvas (html5) Version

Are you looking to incorporate html5-canvas rather than svg into your project?

If so, follow these steps:

Insert a canvas tag within the html document.
Create the drawCircle function as demonstrated in the provided code snippet.

function drawCircle() {
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#003300';
  context.stroke();
}

<button onclick="drawCircle()">Draw Circle</button>
<br />
<canvas id="myCanvas" width="578" height="200"></canvas>

Update:

Check out SVG Version below:

function drawCircle() {
  document.getElementById('svg').innerHTML = '<circle cx="100" cy="100" r="70" stroke="black" stroke-width="5" fill="green" />';
}

<button onclick="drawCircle()">Draw Circle</button>
<br /><br />
<svg height="200" width="578" id="svg"></svg>

With regards to drawing using SVG, it is recommended to utilize a library like svg.js

function drawCircle() {
  var draw = SVG('draw').size(578, 200);
  var circle = draw.circle(70).attr({fill:'green',stroke:'#003300', 'stroke-width': 5, cx:50, cy:50});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.2.5/svg.js"></script>
<button onclick="drawCircle()">Draw Circle</button>
<br /><br />
<div id="draw"></div>

Creating stunning visuals with the power of SVG

Answer №1

Similar questions

WordPress display issue: AMCharts chart won't appear

Fetch Timeout Issue in React Native

Javascript: Issue encountered while the page was loading

Unable to render Angular charts

Can you show me the steps for downloading the WebPage component?

Updating the @mui/x-data-grid table dynamically upon fetching new data

Angular select automatically saves the selected option when navigating between views

How can I extract the return value of a JSON object and store it in a variable?

Python allows for the color coding of numbers using a method that is comparable to the conditional

using javascript to retrieve php variables

Executing a complex xpath using Java Script Executor in Selenium WebDriver

Guide on retrieving JSON information within an array utilizing a loop function

The standard date format used in Javascript/Jquery programs

Selection menu drops down once the save is complete

What is the process for accessing an image via localhost on the same computer?

Firebase and React are having trouble communicating because it is unable to access the properties of 'auth'

The custom color override feature in Bootstrap is not being applied as expected

There seems to be a lack of definition for Angular within the angular

PHP Pear Mail HTML Edition

Obtaining the value of a JavaScript confirm popup in C#.NET