Jump to content

TonyC

Members
 View Profile  See their activity

  • Posts

    7

  • Joined

  • Last visited

 Content Type 

Posts posted by TonyC

    Very Basic SVG: width and height and bizarre double stroke on the right and bottom of a rectangle

    in Multimedia

    Posted

    Thank you so much for the effort you put into that reply.  I'm very much looking forward to trying it.  

    I'm curious, I tried placing a transparent canvas on the page, I thought that would work, but all I got was a blank page:  

    <body>  
	<canvas id="test">
		<script>
			const canvas = document.getElementById('test');
			const ctx = canvas.getContext('2d');
			ctx.globalAlpha = 0.0;
		</script> 	
...
      
	</canvas> 
</body>

    I want to understand canvases better, any thoughts on why that did not work? 

    Thanks again, you're amazing! 

    Very Basic SVG: width and height and bizarre double stroke on the right and bottom of a rectangle

    in Multimedia

    Posted

    Okay, my next task is to get the rectangle to appear in a random position.  This will require some minor tweaks, like replacing absolute numbers in the <svg> tag with screen width and height,  but it's working: 
      

    <p id="demo"></p>
  <script>
	document.getElementById("demo").innerHTML = 
	"<svg width = " + 1600 + " height = " + 800 + "> <rect x =" + (Math.random() * 100) + " y = " + (Math.random() * 100) + " height = " + 12 + " width = " + 12+ " rx = " + 2 + "  style='fill:rgb(0,0,0); stroke-width:2; stroke:rgb(255,0,255)'/> </svg>";  
  </script>


    The problem is, the rectangle is appearing only within the small space that the browser is reserving for the paragraph.  I want it to appear anywhere on the page.  I tried using a <span> tag or a <div> tag immediately after the <body> tag and a </span> tag or a </div> tag immediately before the </body> tag, but that replaced the entire page with a small rectangle.  Not what I had in mind.  How would I get the rectangle to appear randomly on the page, in front of (or behind) the content?  

    Thank you in advance!  

    Very Basic SVG: width and height and bizarre double stroke on the right and bottom of a rectangle

    in Multimedia

    Posted

    I hope this post is in the right place, I did not see an SVG forum. 

    Some very basic SVG code: 
      

    <!DOCTYPE html>
<html>
<body bgcolor="#000000#">

<svg width="800" height="400">
  <rect width="200" height="200" style=" fill:rgb(0,0,0); stroke-width:2; stroke:rgb(255,0,255)" />
  Sorry, your browser does not support inline SVG.  
</svg>
 
</body>
</html>

    Forgive "bgcolor", it's 2 am. :)

    1. Why do the <svg> and <rect> tags both require width and height tags? 

    2  It looks like SVG is trying to create something like a beveled edge.  There is what looks like 1 stroke on the top and left of the rectangle, and what looks like 2 strokes on the bottom and right of the rectangle. How do I get the same stroke on all four sides?   

    image.png.ced9739865509f6de5c52301857e2078.png

    Many thanks! 

    How to convert to-and-from colors with pictures or videos (YIQ, YUV, YCbCr, RGB, CMY, HSV, HSL, LCH...), not a object?

    in Multimedia

    Posted · Edited by TonyC

    On 6/2/2021 at 6:30 AM, Winston said:

    I was looking for code that switches R with H, G with S and B with L in JS

    There is no direct link between R and H, G and S, and B and L. The RGB value as a whole must be converted to HSL.  There's a formula, I don't know it, but I'm sure you can do a search for it.  As Ingolme explained, I think it would have to be done on a pixel by pixel basis.  Is there an effect you are trying to create (like added brightness or contrast or hue change)?  If so, that can be done easily with CSS Filters.  BTW Ingolme, nice find, I had no idea that you could convert green screen to a background LIVE, that's very impressive.   

    Save HTML5 Canvas to my user's drive w/ current file format and quality

    in JavaScript

    Posted · Edited by TonyC

    I should specify in advance "Using pure JavaScript: I'm working on bare-bones HTML5 / CSS3 / JavaScript image editor and I'm ready to add a fileSave function. I'm going to use toDataURL() to allow the user to

    (1) save the file with a new JPG quality setting, or

    (2) save the file to PNG (I'm not aware of any options for PNG), or

    (3) save the current file format (typically JPG) and current quality setting.

    This last option will basically be the same thing as "right click" and "save file", but I would prefer something that will work from a button.

    How would I go about doing this? A code sample would definitely be helpful 

    Thank you 

×
×
  • Create New...