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

Python Selenium cannot locate button within an iframe

Importance of route prioritization in Express.js

How to upload a document to Alfresco using JavaScript API

Securing a namespace using passport js: A step-by-step guide

Does the syntax for the $.ajax() function appear to be incorrect in this instance?

Text box input that displays the latter portion before the initial part

Connecting Vue.js components together

The URL is being modified by the Angular $compile function

How can I make the burger icon responsive and centered in my navbar?

Twofold Arrow Styling in CSS

A guide to customizing nested elements in react using styled-components

Struggling to access your account on the Django website?

Executing secure journey within TypeScript

"Step-by-step guide on associating JSON data with <li> elements using AngularJS

Displaying components in Vue 2 using data from an ajax call

Navigate to the web page in order to utilize the mobile GPS application and transfer your current location data directly to the

Typescript: Securing Data with the Crypto Module

What could be the reason for the absence of the HTTP response in the network tab of the Chrome debugger?

When the mouse is clicked, rotate the object along its axis using OBJ Loader in THREE.js

What is the best way to dynamically update styleUrls or style properties in Angular?