1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

jsfiddle of canvas auto-centering circle

Discussion in 'JavaScript' started by seductiveapps.com, Jul 19, 2017.

  1. #1
    took me about 2 hours and wasn't the easiest thing i've done in computer programming, so i thought it would be nice to share it here..

    https://jsfiddle.net/ptkvmhce/
    SEMrush
     
    seductiveapps.com, Jul 19, 2017 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,439
    Likes Received:
    1,511
    Best Answers:
    220
    Trophy Points:
    515
    #2
    Not quite what I'd call centered, though in general you're throwing a bunch of scripting at nothing.... though that's typical when the mouth-breathing idiocy that's jQuery gets involved.... nor is that easel nonsense doing you any favors. Same for using those onevent="" attributes in the markup given those SHOULD be going the way of the dodo since they're disabled under the CSP (should you end up deploying a site that needs that)

    Particularly for something like onload that in MOST cases you could just run the script flat before </body>

    Also, this is 2017, you can stop saying type="text/javascript" now. (praise be!!!)

    ... though... are you trying to center the canvas, or what's IN the canvas, your code's kind of all over the place on that. If the former, that's not even JavaScript's job. If the latter, why are you screwing around with all that extra markup and targeting the canvas' parent?

    Since you don't seem to be resizing the canvas (though it's hard to tell with all the bloated framework crap), just flex-box or table-cell to center the canvas in the viewport. As I'm ALWAYS saying, STOP using JavaScript to do CSS' job! You've written 3.6k of code to do 1.5k's job!

    HTML:
    
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <meta
    	name="viewport"
    	content="width=device-width,height=device-height,initial-scale=1"
    >
    <link
    	rel="stylesheet"
    	href="circleDemo.screen.css"
    	media="screen,projection,tv"
    >
    </head><body>
    <noscript>
    	<p>
    		This page requires JavaScript to function properly, please enable it in your browser or come back using a browser that supports it.
    	</p>
    </noscript>
    <script src="circleDemo.js"></script>
    </body></html>
    
    Code (markup):
    Since <canvas> only works JavaScript enabled, it really has ZERO damned business in the markup. that's why I question why the **** it even HAS a tag. Likewise be sure to include a noscript message for users who are blocking scripts if this is mission critical. If it's NOT, put CANVAS back in the markup and put a IMG inside it as a fallback.

    CSS:
    
    html,
    body {
    	position:relative;
    	width:100%;
    	height:100%;
    	margin:0;
    	padding:0;
    }
    
    html {
    	display:table;
    }
    
    body {
    	display:table-cell;
    	text-align:center;
    	vertical-align:middle;
    }
    
    Code (markup):
    That does 99% of the stuff you're wasting massive frameworks and math on doing in terms of centering the canvas element. If you are using it as a overlay, add a DIV around it and make that position:fixed as display:table-cell... or use flex-box.

    JavaScript:
    
    (function() {
    
    	var cCanvas = document.body.appendChild(document.createElement('canvas'));
    
    	if (!cCanvas.getContext) {
    		alert('This program requires a browser that supports the JavaScript <canvas> feature. Your browser either has it disabled, or is too old to run this program. Please try again in a more modern browser such as Firefox, Chrome, Safari, Opera, or Vivaldi. I GUESS you could also try Edge or IE10+ if you\'re into self flagellation');
    		return;
    	}
    
    	cCanvas.width = 100;
    	cCanvas.height = 100;
    
    	var ctx = cCanvas.getContext('2d');
    
    	function paint() {
    		ctx.beginPath();
    		ctx.arc(50, 50, 10, 0, 2 * Math.PI);
    		ctx.fillStyle = 'DeepSkyBlue';
    		ctx.fill();
    		ctx.closePath(); // not needed right now, but I do it for later
    	} // paint
    
    	paint();
    
    	// MOST browsers will retain content on resize, but don't TRUST that!
    	window.addEventListener('resize', paint, false);
    
    })();
    Code (markup):
    Lose the stupid framework garbage, they're only making you work harder, NOT SMARTER. As always, throw a message if canvas is unsupported. Since it's in a self instancing function we can use 'return' to short circuit out in that case.

    I've found window resizing of canvas to be unreliable, particularly if you start adding min-width and max-width to the canvas or resizing canvas whilst leaving the context intact, so I always hook onresize to paint() again if this isn't an animation. If it is an animation your requestAnimationFrame callback should handle it instead!

    Like a lot of things you've shared, stop relying on pointless frameworks, stop using JavaScript to do CSS' job, and stop overthinking the answer to everything.

    Oh and yes technically we don't need the closepath, but IE9 under Win7 does some funky stuff on the resize paint() without it, so... it's one line of code, better safe than sorry. IDEALLY we should probably use a fill to blank the context first though.

    Real laugh being my version has almost as many bytes in warning strings as it does code.
     
    Last edited: Aug 12, 2017
    deathshadow, Aug 12, 2017 IP