Search the Blog

Wednesday, August 7, 2019

JavaScript SVG uses and demo example

SVG elements in HTML used for building vector based graphics-

First create a SVG container  element variable, Then declare the width and height

      var SVG_vector =document.createElementNS('https://www.dizsweb.com', 'svg');      SVG_vector .width = 500;       SVG_vector .height = 250;


 Build a text element with the desired positioning and font characteristics:

       var svg_text= document.createElementNS('http://www.w3.org/2000/svg', 'text');
       svg_text.setAttribute('x', '0');
       svg_text.setAttribute('y', '50');
       svg_text.style.fontFamily = 'Times New Roman';
       svg_text.style.fontSize = '50';
       svg_text.textContent = 'Programming Logic And Code!';


Then finnaly we to insert  canvas element into the page to take effect of all above code:
     SVG_vector.appendChild(svg_text);     document.body.appendChild(SVG_vector );

Image Display Code-
var img = new Image(); 
img.src = 'image url';
 document.body.appendChild(img);



https://www.tutorialspoint.com/index.htm

Tuesday, August 6, 2019

JavaScript Canvas uses and demo example

Canvas elements in HTML used for building rectangular based building shape-

First create a canvas element variable, Then declare the width and height

      var canvas_rectangle = document.createElement('canvas');
      canvas_rectangle .width = 500; 
      canvas_rectangle .height = 250;


Please select a context for the canvas- it may be 2D, 3D in first example we will use 2D.
     var ctx_can = canvas_rectangle .getContext('2d');

Then we have to set all property related to canvas

      ctx_can .font = '30px Cursive';
      ctx_can .fillText("www.dizsweb.com?", 50, 50);


Then finnaly we to insert  canvas element into the page to take effect of all above code:
     document.body.appendChild(canvas_rectangle);



JavaScript window.confirm() method syntax, code and demo example

The window.confirm() method use to modal dialog  box with an optional text message and two buttons with functionality OK and Cancel. OK used for acceptance and cancel for rejection.

if(window.confirm("Are you sure fo delete this?"))

      deleteItem(itemId);
}

For storing the result we can store the result:

var status = window.confirm("Are you sure for delete this?");


Following need to be have in mind-

 1-   The argument which is passed is optional and not required by the specification.
 2-   Dialog boxes is modal windows.

Translate