Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Javascript Articles
Page 216 of 534
HTML5 Canvas Degree Symbol
For HTML5 Canvas degree symbol, try to run the following code − body { margin:5em; background:#eee; text-align:center } canvas { background:#fff; border:2px solid #ccc; display:block; margin:3em auto } var c = document.getElementsByTagName('canvas')[0]; c.width = c.height = 300; var context = c.getContext('2d'); context.font = "20px sans-serif"; context.fillText("212° Fahrenheit", 100, 100);
Read MoreCreating a Simple Calculator using HTML, CSS, and JavaScript
A Student grade calculator is used for taking the grades input for all subjects and then calculating the percentage based upon the marks of the students. This calculator returns a fairly reliable indicator of student results.The simple formula for calculating grades is:$\text{Percentage}=\frac{\text{Marks Scored}}{\text{Total Marks}}\times 100$We are going to take the inputs using HTML, once the inputs are entered we will call the JS function to calculate the average percentage of these numbers and will return the same to the user.Steps for creating a calculator −We will be taking inputs from the user using the input tag.Once the inputs are taken, ...
Read MoreHow to disable uniform scaling in canvas using FabricJS?
In this article, we are going to learn about how to disable uniform scaling in canvas using FabricJS. In FabricJS, an object gets transformed proportionally when dragged from the corners. However, we can disable this behavior by using the uniformScaling property.Syntaxnew fabric.Canvas(element: HTMLElement|String, { uniformScaling: Boolean }: Object)Parameterselement − This parameter is the element itself which can be derived using document.getElementById() or the id of the element itself. The FabricJS canvas will be initialized on this element.options (optional) − This parameter is an Object which provides additional customizations to our canvas. Using this parameter, properties such as color, ...
Read MoreHTML5 Canvas distorted
If the canvas looks distorted, then try to change the height and width −The default height and width of the canvas in HTML5 is of 2/1 ratio −width = 300 height = 150ExampleLet us see an example − #mycanvas{border:1px solid red;} Output
Read MoreHow to draw an oval in HTML5 canvas?
You can try to run the following code to draw an oval in HTML5 canvas −Example // canvas var c = document.getElementById('newCanvas'); var context = c.getContext('2d'); var cX = 0; var cY = 0; var radius = 40; context.save(); context.translate(c.width / 2, c.height / 2); context.scale(2, 1); context.beginPath(); context.arc(cX, cY, radius, 0, 2 * Math.PI, false); context.restore(); context.fillStyle = '#000000'; context.fill(); context.lineWidth = 2; context.strokeStyle = 'yellow'; context.stroke(); Output
Read MoreHow to draw sine waves with HTML5 SVG?
To draw sine waves with SVG, use the following that closely approximates half of a sine wave. I have used a cubic-bezier approximation. Use the element.Example SVG HTML5 SVG Sine Waves Output
Read MoreHow to draw a star in HTML5 SVG?
SVG stands for Scalable Vector Graphics and is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG.To draw a polygon in HTML SVG, use the SVG element. The element creates a graphic containing at least three sides. For drawing a star in HTML5 SVG, you need to set the x and y coordinates properly for each corner.ExampleYou can try to run the following code to learn how to draw a ...
Read MoreHow to display Material Chip View in React Native?
To display chips in the UI, we are going to make use of React Native Paper Material Design.Install react native paper as shown below −npm install --save-dev react-native-paperThe chip component looks as follows on the UI −The basic chip component is as follows −Chip NameThe basic properties of chip are as follows −PropsDescriptionmodeThe values for mode are flat and outlined. With flat mode you will not get a border and with outlined the border for the chip will be displayed.iconThe icon to be given to the chip.selectedThe values are true/false. If true the chip will be selected.selectedColorColor to be given ...
Read MoreHow to show a checkbox in reactnative?
Checkboxes is a common component that we often use on the UI. We do have some cool ways of showing checkboxes in reactnative.The core react-native package does not have checkbox support and you need to install a package to work with it.Following package has to be installed to display checkbox −npm install --save-dev react-native-paperThe basic checkbox component is as follows −Let us now see some important properties on checkbox −PropsDescriptionstatusThe value that can be given to status are checked, unchecked and indeterminate.disabledThe value is boolean.It can be used to enable/disable the checkbox.onPressThe function that will be called when the checkbox ...
Read MoreHow to display date and time picker in ReactNative?
To display date and time picker in your app you have to install a package as shown below −npm install @react-native-community/datetimepicker --saveOnce you are done installing, let us now proceed on how to display a Datepicker first.Example: DateTimePicker in ReactNativeImport the datetimepicker component first as shown below −import DateTimePicker from '@react-native-community/datetimepicker';A basic DateTimePicker component looks as follows −Here are some of the important properties of DateTimePicker.PropsDescriptionmodeDefines the type of picker you want. The options are date, time, datetime and countdown.From above options datetime and countdown are available only on iOS.displayThe values for Android are default, spinner, calendar and clock. For ...
Read More