Bad Quality For 100% Both Width And Height Of Canvas
I have done a very tiny example with canvas, it's available on JsFiddle: http://jsfiddle.net/yPtr5/ </title&</div><h2 id="solution_1">Solution 1:
</h2><div class="answer-desc"><h3>Problem</h3><p>In most general cases we should avoid using CSS to set the canvas size.</p><p>The default size of canvas is 300 x 150 pixels (bitmap). If you set the size using CSS we'll just end up scaling those 300 x 150 pixels meaning the browser will start interpolating and smoothing the image, which is why you end up with a blurry result.</p><h3>Solution</h3><p>Remove these from the CSS-rule:</p><a name='more'></a><pre class="lang-css prettyprint-override"><code id="code_0" class="hljs language-css"><span class="hljs-selector-id">#myCanvas</span> {
<span class="hljs-comment">/*width: 100%;
height: 100%;*/</span><span class="hljs-attribute">display</span>: block;
}
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_0')">Copy</button></pre><p>and set the size in JavaScript like this:</p><pre><code id="code_1" class="hljs language-javascript"><span class="hljs-keyword">var</span> canvas = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>( <span class="hljs-string">"myCanvas"</span> );
canvas.<span class="hljs-property">width</span> = <span class="hljs-variable language_">window</span>.<span class="hljs-property">innerWidth</span>; <span class="hljs-comment">// equals window dimension</span>
canvas.<span class="hljs-property">height</span> = <span class="hljs-variable language_">window</span>.<span class="hljs-property">innerHeight</span>;
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_1')">Copy</button></pre><p>You can of course set any other size you need (in pixels). You probably want to define position (i.e. fixed or absolute) for the canvas' CSS as well if your goal is full window size.</p><p>Hope this helps.</p></div><h2 id="solution_2">Solution 2:
</h2><div class="answer-desc"><p>The height and width need to be set on the height and width attributes of the canvas tag and not in CSS. Any CSS sizing of the canvas element merely stretches the canvas and does not size it properly.</p><pre><code id="code_2" class="hljs language-bash"><canvas <span class="hljs-built_in">id</span>=<span class="hljs-string">"canvas"</span> width=<span class="hljs-string">"500px"</span> height=<span class="hljs-string">"500px"</span>>
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_2')">Copy</button></pre><p>Have a look at this project that I posted on my site: <a rel="nofollow noreferrer noopener" href="http://www.neilson.co.za/?p=298" title="Creating an HTML5 Paint App">Creating an HTML5 Paint App</a></p><p>It includes a functionto resize the canvas when the browser window size changes <strong>(which you would have to modify)</strong>:</p><pre><code id="code_3" class="hljs language-kotlin"><span class="hljs-keyword">this</span>.onScreenSizeChanged = function (forceResize) {
<span class="hljs-keyword">if</span> (forceResize || (<span class="hljs-keyword">this</span>.canvas.width != window.innerWidth <span class="hljs-comment">/*||
this.canvas.height != window.innerHeight*/</span>)) {
<span class="hljs-keyword">var</span> image = <span class="hljs-keyword">this</span>.context.getImageData(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>,
<span class="hljs-keyword">this</span>.canvas.width, <span class="hljs-keyword">this</span>.canvas.height);
<span class="hljs-keyword">this</span>.canvas.width = (window.innerWidth);
<span class="hljs-keyword">this</span>.canvas.height = (window.innerHeight);
<span class="hljs-keyword">this</span>.context.putImageData(image, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
}
}
<span class="hljs-keyword">this</span>.onScreenSizeChanged(<span class="hljs-literal">true</span>);
</code><button class="copy-btn btn btn-secondary btn-sm" onclick="copyCode(this,'code_3')">Copy</button></pre></div>
</div>
<div id='baca-juga'></div>
<script>
//<![CDATA[
var bacaJugaJudul=[],bacaJugaNum=0,bacaJugaUrl=[];function bacaJuga(a){for(var u=0;u<a.feed.entry.length;u++){var e=a.feed.entry[u];bacaJugaJudul[bacaJugaNum]=e.title.$t;for(var l=0;l<e.link.length;l++)if("alternate"==e.link[l].rel){bacaJugaUrl[bacaJugaNum]=e.link[l].href,bacaJugaNum++;break}}}function showBacaJuga(a){function u(a,u){u.parentNode.insertBefore(a,u.nextSibling)}var e=document.querySelector("#baca-juga"),l=document.createElement("div"),t=document.querySelector(".post-body-artikel").querySelectorAll("div > br, span > br, div > p, span > p"),r=Math.ceil(.5*t.length),n=document.getElementById("related"),c=(l.setAttribute("class","baca-juga-wrap"),{bacaJuga:!0,jumlahBacaJuga:3,judulBacaJuga:"Baca Juga"});optionLinkMagz(c);if(!0===c.bacaJuga&&void 0!==t[r]){u(e,null!==n?n:t[r]);for(var g=0;g<bacaJugaUrl.length;g++)bacaJugaUrl[g]==a&&(bacaJugaUrl.splice(g,1),bacaJugaJudul.splice(g,1));var J=Math.floor((bacaJugaJudul.length-1)*Math.random()),g=0;if(0<bacaJugaJudul.length&&0<c.jumlahBacaJuga){e.appendChild(l);n=e;null!=(n=n.previousElementSibling)&&"BR"===n.tagName&&(n.style.display="none");for(var i="<strong>"+c.judulBacaJuga+"</strong><ul>";g<bacaJugaJudul.length&&g<c.jumlahBacaJuga;g++)i+='<li><a href="'+bacaJugaUrl[J]+'">'+bacaJugaJudul[J]+"</a></li>",J<bacaJugaJudul.length-1?J++:J=0;l.innerHTML=i+="</ul>"}}}
//]]>
</script>
<script src='/feeds/posts/summary/-/Canvas?alt=json-in-script&callback=bacaJuga&max-results=5'></script>
<script src='/feeds/posts/summary/-/Drawing?alt=json-in-script&callback=bacaJuga&max-results=5'></script>
<script src='/feeds/posts/summary/-/Filter?alt=json-in-script&callback=bacaJuga&max-results=5'></script>
<script src='/feeds/posts/summary/-/Html?alt=json-in-script&callback=bacaJuga&max-results=5'></script>
<script src='/feeds/posts/summary/-/Javascript?alt=json-in-script&callback=bacaJuga&max-results=5'></script>
<script>
showBacaJuga("https://bobstrollergrandsale.blogspot.com/2023/10/bad-quality-for-100-both-width-and.html");
</script>
<div id='share-container'>
<div class='share-title'>
<p class='share-this-pleaseeeee'>Share</p>
</div>
<div id='share'>
<a aria-label='facebook' class='facebook' href='//www.facebook.com/sharer.php?u=https://bobstrollergrandsale.blogspot.com/2023/10/bad-quality-for-100-both-width-and.html' rel='nofollow noreferrer' title='facebook'>
<svg viewBox='0 0 24 24'>
<path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'></path>
</svg>
</a>
<a aria-label='twitter' class='twitter' href='//twitter.com/intent/tweet?text=Bad Quality For 100% Both Width And Height Of Canvas&url=https://bobstrollergrandsale.blogspot.com/2023/10/bad-quality-for-100-both-width-and.html' rel='nofollow noreferrer' title='twitter'>
<svg viewBox='0 0 24 24'>
<path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z'></path>
</svg>
</a>
<a aria-label='pinterest' class='pinterest' href='//pinterest.com/pin/create/button/?url=https://bobstrollergrandsale.blogspot.com/2023/10/bad-quality-for-100-both-width-and.html&media=&description=Bad Quality For 100% Both Width And Height Of Canvas' rel='nofollow noreferrer' title='pinterest'>
<svg viewBox='0 0 24 24'>
<path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'></path>
</svg>
</a>
<a aria-label='whatsapp' class='whatsapp' href='//api.whatsapp.com/send?phone=&text=Bad Quality For 100% Both Width And Height Of Canvas%20%2D%20https://bobstrollergrandsale.blogspot.com/2023/10/bad-quality-for-100-both-width-and.html' rel='nofollow noreferrer' title='whatsapp'>
<svg viewBox='0 0 24 24'>
<path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'></path>
</svg>
</a>
<a aria-label='telegram' class='telegram' href='https://t.me/share/url?url=https://bobstrollergrandsale.blogspot.com/2023/10/bad-quality-for-100-both-width-and.html&text=Bad Quality For 100% Both Width And Height Of Canvas' rel='nofollow noreferrer' target='_blank' title='telegram'>
<svg viewBox='0 0 24 24'>
<path d='M19.4 3.717l-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42l10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701h-.002l.002.001l-.314 4.692c.46 0 .663-.211.921-.46l2.211-2.15l4.599 3.397c.848.467 1.457.227 1.668-.785l3.019-14.228c.309-1.239-.473-1.8-1.282-1.434z'></path>
</svg>
</a>
</div>
</div>
<div id='ms-related-post'></div>
<script>
var postLabels = ["Canvas", "Drawing", "Filter", "Html", "Javascript", ];
var relatedConfig = {
postUrl: "https://bobstrollergrandsale.blogspot.com/2023/10/bad-quality-for-100-both-width-and.html",
homePageUrl: "https://bobstrollergrandsale.blogspot.com/",
relatedTitleText: "You may like these posts",
};
</script>
<div id='ms-matched-content'></div>
<script>
//<![CDATA[
// related post js from www.dte.web.id modified by sugeng.id
!function(){var e,b={relatedTitleOuterOpen:'<div class="related-title"><p class="ms-title">',relatedTitleOuterClose:"</p></div>",relatedTitleText:"Artikel Terkait",thumbWidth:192,thumbHeight:108,imgBlank:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAYSURBVCiRY0xISOBgoAAwUaJ51IBhYwAAuQABOsYCprwAAAAASUVORK5CYII=",relatedOuter:"ms-related-post"};for(e in relatedConfig)"undefined"!=relatedConfig[e]&&(b[e]=relatedConfig[e]);function t(e){var t=document.createElement("script");t.src=e,document.getElementsByTagName("head")[0].appendChild(t)}function v(e){var t,l,a=e.length;if(0===a)return!1;for(;--a;)t=Math.floor(Math.random()*(a+1)),l=e[a],e[a]=e[t],e[t]=l;return e}var B={relatedPosts:!0,jumlahRelatedPosts:4,relatedPostsThumb:!0,judulRelatedPosts:b.relatedTitleText,relatedPostsNoThumbImg:"//1.bp.blogspot.com/-sLMytth04W8/XtoBMx9lUjI/AAAAAAAAHmM/zK-toM5XTacePvBHnpIO_tfzjg63BD3ZgCK4BGAsYHg/w192-h108-n-k-no-nu-rw/nomage%2B%25281%2529.png"},l=(optionLinkMagz(B),"object"==typeof postLabels&&0<postLabels.length?"/-/"+v(postLabels)[0]:"");l=l.replace("&","&"),msRelatedPosts=function(e){var t,l,a,s,r,d,o,n,i=b.relatedTitleOuterOpen+B.judulRelatedPosts+b.relatedTitleOuterClose,A=document.getElementById(b.relatedOuter),m=v(e.feed.entry);i+=1==B.relatedPostsThumb?'<ul class="ms-related-hasthumb">':'<ul class="ms-related-nothumb">';for(var u=0;u<m.length;u++)for(var h=0,c=m[u].link.length;h<c;h++)m[u].link[h].href==b.postUrl&&m.splice(u,1);if(0<m.length){for(var g=0;g<B.jumlahRelatedPosts&&g<m.length;g++){l=m[g].title.$t,void 0!==m[g].content&&(r=(s=m[g].content.$t).indexOf("<img",0));function f(e){a=e.replace(/.*?:\/\//g,"//").replace(/s72-(c|.*?-c)/,"w"+b.thumbWidth+"-h"+b.thumbHeight+"-c-rw")}"media$thumbnail"in m[g]?f(m[g].media$thumbnail.url):void 0!==r&&-1!==r?(d=s.indexOf("/>",r),o=(d=s.slice(r,d)).indexOf("src=",0)+5,n=d.indexOf('"',o),f(d.slice(o,n))):a=B.relatedPostsNoThumbImg;for(var p=0,c=m[g].link.length;p<c;p++)t="alternate"==m[g].link[p].rel?m[g].link[p].href:"#";i+='<li><a title="'+l+'" href="'+t+'">'+(1==B.relatedPostsThumb?'<div class="related-thumb-outer"><img alt="'+l+'" class="related-thumb" src="'+a+'" width="'+b.thumbWidth+'" height="'+b.thumbHeight+'"></div>':"")+('<div class="related-title-outer">'+l+"</div>")+"</a></li>"}1==B.relatedPosts&&(A.innerHTML=i+="</ul>")}},msRandomIndex=function(e){e=e.feed.openSearch$totalResults.$t-(B.jumlahRelatedPosts+1),e=1<e?1+Math.floor(Math.random()*e):1;t(b.homePageUrl.replace(/\/$/,"")+"/feeds/posts/default"+l+"?alt=json-in-script&orderby=updated&start-index="+e+"&max-results="+(B.jumlahRelatedPosts+1)+"&callback=msRelatedPosts")},t(b.homePageUrl.replace(/\/$/,"")+"/feeds/posts/summary"+l+"?alt=json-in-script&orderby=updated&max-results=0&callback=msRandomIndex")}();
function fullwidthImg(){var t=document.querySelector(".post-body img"),l=document.querySelector(".post-body > .tr-caption-container");l?l.classList.add("fullwidth"):t&&t.classList.add("fullwidth")}!function(){var t={fullwidthImage:!0};optionLinkMagz(t),1==t.fullwidthImage&&fullwidthImg()}();
//]]>
</script>
</div>
<section class='comments comments-non-threaded embed' data-num-comments='0' id='comments'>
<a name='comments'></a>
<h2 class='comments-title'>
Post a Comment
for "Bad Quality For 100% Both Width And Height Of Canvas"
</h2>
<div id='Blog1_comments-block-wrapper'>
</div>
<div class='comment-footer'>
<div class='comment-form default-comment-form'>
<a name='comment-form'></a>
<a aria-label='comment form' href='https://www.blogger.com/comment/frame/3834082797626405161?po=575848013877651776&hl=en&skin=contempo' id='comment-editor-src'></a>
<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' title='comment-editor' width='100%'></iframe>
<script src='https://www.blogger.com/static/v1/jsbin/1466990918-comment_from_post_iframe.js' type='text/javascript'></script>
<script>
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
</script>
</div>
</div>
</section>
</article>
</div>
</div></div>
<div class='iklan-atas section' id='iklan-atas'><div class='widget HTML' data-version='2' id='HTML76'>
<div class='widget-content kode-iklan-atas'>
<script type="text/javascript">
atOptions = {
'key' : '365d5ac5cd4e9ff093a5907e9ad650e2',
'format' : 'iframe',
'height' : 250,
'width' : 300,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://resentproduces.com/365d5ac5cd4e9ff093a5907e9ad650e2/invoke.js"></scr' + 'ipt>');
</script>
</div>
</div></div>
<div class='iklan-tengah1 section' id='iklan-tengah1'><div class='widget HTML' data-version='2' id='HTML77'>
<div class='widget-content kode-iklan-tengah'>
<script type="text/javascript">
atOptions = {
'key' : 'edd748cb9b42467680df52aa8ab2d846',
'format' : 'iframe',
'height' : 60,
'width' : 468,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://resentproduces.com/edd748cb9b42467680df52aa8ab2d846/invoke.js"></scr' + 'ipt>');
</script>
</div>
</div></div>
<div class='iklan-tengah2 section' id='iklan-tengah2'><div class='widget HTML' data-version='2' id='HTML78'>
<div class='widget-content kode-iklan-tengah'>
<script type="text/javascript">
atOptions = {
'key' : 'edd748cb9b42467680df52aa8ab2d846',
'format' : 'iframe',
'height' : 60,
'width' : 468,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://resentproduces.com/edd748cb9b42467680df52aa8ab2d846/invoke.js"></scr' + 'ipt>');
</script>
</div>
</div></div>
<div class='iklan-bawah section' id='iklan-bawah'><div class='widget HTML' data-version='2' id='HTML79'>
<div class='widget-content kode-iklan-bawah'>
<script type="text/javascript">
atOptions = {
'key' : '63a77c42756762736b0155173bf1a66d',
'format' : 'iframe',
'height' : 50,
'width' : 320,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://resentproduces.com/63a77c42756762736b0155173bf1a66d/invoke.js"></scr' + 'ipt>');
</script>
</div>
</div></div>
<div class='matched-content section' id='matched-content'><div class='widget HTML' data-version='2' id='HTML939'>
<div class='widget-content kode-matched-content'>
</div>
</div></div>
<script>//<![CDATA[
function LMmiddleAds(a){function e(e,n,l){function t(e,n){void 0!==n&&n.parentNode.insertBefore(e,n.nextSibling)}if(1<d.length){null!=e&&"\n"!=e.innerHTML&&t(e,null!==n?n:d[l]);for(var i,r=a.querySelectorAll(".post-body-artikel .kode-iklan-tengah"),o=0;o<r.length;o++)null!==(i=r[o].previousElementSibling)&&"BR"===i.tagName&&(i.style.display="none")}else e.parentNode.removeChild(e)}var n=a.querySelector(".post-body"),d=n.querySelectorAll("div > br, span > br, div > p, span > p"),l=Math.ceil(.2*d.length),t=Math.ceil(.7*d.length),i=a.querySelector("#iklan-tengah1 .widget-content"),r=a.querySelector("#iklan-tengah2 .widget-content"),o=a.querySelector("#iklan-atas .widget-content"),c=a.querySelector("#iklan-bawah .widget-content"),u=n.querySelector("#iklan1"),g=n.querySelector("#iklan2");null!=o&&"\n"!=o.innerHTML&&n.insertBefore(o,n.childNodes[0]),null!=c&&"\n"!=c.innerHTML&&n.appendChild(c);e(i,u,l),e(r,g,t)}LMmiddleAds(document);
function matchedAds(){var e,n,t={iklanMatched:!0};optionLinkMagz(t),e=document.querySelector("#ms-matched-content"),n=document.querySelector("#matched-content .widget-content"),null!=e?1==t.iklanMatched&&null!=n&&"\n"!=n.innerHTML&&e.appendChild(n):n.parentNode.removeChild(n)}matchedAds();
//]]>
</script>
</section>
<aside id='sidebar-wrap'>
<div class='sidebar section' id='sidebar'><div class='widget HTML' data-version='2' id='HTML1'>
<div class='widget-content'>
<script type="text/javascript">
atOptions = {
'key' : 'b3cbedc3153259c38733a80008471667',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://resentproduces.com/b3cbedc3153259c38733a80008471667/invoke.js"></scr' + 'ipt>');
</script>
</div>
</div><div class='widget PopularPosts' data-version='2' id='PopularPosts1'>
<div class='popular-post-widget-title'>
<h2 class='title'>Top Question</h2>
</div>
<div class='widget-content'>
<div class='popular-posts-wrap'>
<div class='the-most-popular'>
<div class='popular-post-thumbnail'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/07/split-comma-separated-string-by-comma.html'>
<img alt='Image' class='lazyload' data-src='//1.bp.blogspot.com/-sLMytth04W8/XtoBMx9lUjI/AAAAAAAAHmM/zK-toM5XTacePvBHnpIO_tfzjg63BD3ZgCK4BGAsYHg/w300-h168-p-k-no-nu/nomage%2B%25281%2529.png' height='169' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAYSURBVCiRY0xISOBgoAAwUaJ51IBhYwAAuQABOsYCprwAAAAASUVORK5CYII=' width='300'/>
<div class='lazy-loading'></div>
</a>
</div>
<div class='popular-post-info info-has-thumbnail'>
<p class='popular-post-title'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/07/split-comma-separated-string-by-comma.html'>
Split Comma Separated String By Comma
</a>
</p>
<div class='popular-post-snippet'>
Need to split the string containing country names separated…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://bobstrollergrandsale.blogspot.com/2022/06/changing-font-size-options-on-wysiwyg.html'>
Changing Font Size Options On WYSIWYG Editor?
</a>
</p>
<div class='popular-post-snippet'>
So I have a bootstrap wysiwyg editor from a jqueryscript.ne…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://bobstrollergrandsale.blogspot.com/2022/06/what-is-correct-way-to-serialize.html'>
What Is The Correct Way To "serialize" Functions In Javascript For Later Use
</a>
</p>
<div class='popular-post-snippet'>
I have a 'library' of objects that I want to load o…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://bobstrollergrandsale.blogspot.com/2022/08/bootstrap-counter-start-on-display.html'>
Bootstrap Counter Start On Display
</a>
</p>
<div class='popular-post-snippet'>
So I found this codepen tutorial that helped me get number …
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://bobstrollergrandsale.blogspot.com/2022/07/select-and-unselect-all-checkboxes.html'>
Select And Unselect All Checkboxes
</a>
</p>
<div class='popular-post-snippet'>
I'm not able to implement these things,In this page I w…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://bobstrollergrandsale.blogspot.com/2022/07/how-does-nodejs-work-as-opposed-to-php.html'>
How Does Node.JS Work As Opposed To PHP?
</a>
</p>
<div class='popular-post-snippet'>
I'm thinking of switching from PHP to using Node.js for…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/02/dropdown-menu-on-refresh-changes.html'>
Dropdown Menu On Refresh Changes Javascript
</a>
</p>
<div class='popular-post-snippet'>
I have implemented a navbar uisng bootstrap 4,in which I ha…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/03/logic-for-next-button-for-questionnaire.html'>
Logic For The Next Button For The Questionnaire?
</a>
</p>
<div class='popular-post-snippet'>
I am beginner in AngularJS and facing some issues. I am try…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/08/issue-with-floating-buttons-right-of-my.html'>
Issue With Floating Buttons Right Of My To Do List
</a>
</p>
<div class='popular-post-snippet'>
I'm trying to create a to-do list app with jquery or bo…
</div>
</div>
</div>
<div class='popular-post-content'>
<div class='popular-post-info'>
<p class='popular-post-title'>
<a href='https://bobstrollergrandsale.blogspot.com/2022/06/threejs-scale-model-with-scaleset-or.html'>
Three.js - Scale Model With Scale.set() Or Increase Model Size?
</a>
</p>
<div class='popular-post-snippet'>
What is the best practise for scaling 3d models in Three.js…
</div>
</div>
</div>
</div>
</div>
</div></div>
<div class='sidebar-sticky section' id='sidebar-sticky'><div class='widget BlogArchive' data-version='2' id='BlogArchive1'>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<div class='archive-flat'>
<ul>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2024/09/'>
September 2024
<span class='post-count'>(20)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2024/08/'>
August 2024
<span class='post-count'>(385)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2024/07/'>
July 2024
<span class='post-count'>(340)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2024/06/'>
June 2024
<span class='post-count'>(706)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2024/05/'>
May 2024
<span class='post-count'>(1296)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2024/04/'>
April 2024
<span class='post-count'>(848)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2024/03/'>
March 2024
<span class='post-count'>(1553)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2024/02/'>
February 2024
<span class='post-count'>(1722)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2024/01/'>
January 2024
<span class='post-count'>(1374)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/12/'>
December 2023
<span class='post-count'>(1396)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/11/'>
November 2023
<span class='post-count'>(450)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/10/'>
October 2023
<span class='post-count'>(631)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/09/'>
September 2023
<span class='post-count'>(335)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/08/'>
August 2023
<span class='post-count'>(350)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/07/'>
July 2023
<span class='post-count'>(265)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/06/'>
June 2023
<span class='post-count'>(378)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/05/'>
May 2023
<span class='post-count'>(204)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/04/'>
April 2023
<span class='post-count'>(134)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/03/'>
March 2023
<span class='post-count'>(143)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/02/'>
February 2023
<span class='post-count'>(183)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2023/01/'>
January 2023
<span class='post-count'>(280)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2022/12/'>
December 2022
<span class='post-count'>(131)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2022/11/'>
November 2022
<span class='post-count'>(247)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2022/10/'>
October 2022
<span class='post-count'>(168)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2022/09/'>
September 2022
<span class='post-count'>(167)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2022/08/'>
August 2022
<span class='post-count'>(500)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2022/07/'>
July 2022
<span class='post-count'>(314)</span>
</a>
</li>
<li class='archivedate'>
<a href='https://bobstrollergrandsale.blogspot.com/2022/06/'>
June 2022
<span class='post-count'>(260)</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div></div>
</aside>
</main>
<div id='footer-widget-html-wrap'>
<div class='footer-widget-html section' id='footer-widget-html'><div class='widget HTML' data-version='2' id='HTML831'>
</div></div>
</div>
<footer id='footer-outer'>
<div id='footer-content'>
<div class='page-navmenu section' id='page-navmenu'><div class='widget PageList' data-version='2' id='PageList1'>
<div class='normalwidget-title'>
<h2 class='title'>Menu Halaman Statis</h2>
</div>
<div class='widget-content'>
<ul>
<li>
<a href='https://bobstrollergrandsale.blogspot.com/'>Beranda</a>
</li>
</ul>
</div>
</div></div>
<div class='footer-text section' id='footer-text'><div class='widget HTML' data-version='2' id='HTML80'>
<div class='footer-text'>
© 2022 - <a href='https://bobstrollergrandsale.blogspot.com/'>javascript edu </a>
</div>
</div></div>
<div class='navbarrr section' id='navbarrr'><div class='widget Navbar' data-version='2' id='Navbar1'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes && gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d3834082797626405161\x26blogName\x3djavascript+edu+\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dLAYOUTS\x26searchRoot\x3dhttps://bobstrollergrandsale.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttps://bobstrollergrandsale.blogspot.com/\x26targetPostID\x3d575848013877651776\x26blogPostOrPageUrl\x3dhttps://bobstrollergrandsale.blogspot.com/2023/10/bad-quality-for-100-both-width-and.html\x26vt\x3d7243716176851663287',
where: document.getElementById("navbar-iframe-container"),
id: "navbar-iframe"
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</div></div>
</div>
</footer>
<a aria-label='Go To Top' href='#' id='goTop'>
</a>
<script>
//<![CDATA[
/*! smooth-scroll js from Chris Ferdinandi (http://github.com/cferdinandi/smooth-scroll) */
!function(e,t){"function"==typeof define&&define.amd?define([],function(){return t(e)}):"object"==typeof exports?module.exports=t(e):e.SmoothScroll=t(e)}("undefined"!=typeof global?global:"undefined"!=typeof window?window:this,function(E){"use strict";function b(){var n={};return Array.prototype.forEach.call(arguments,function(e){for(var t in e){if(!e.hasOwnProperty(t))return;n[t]=e[t]}}),n}function i(e){"#"===e.charAt(0)&&(e=e.substr(1));for(var t,n=String(e),o=n.length,a=-1,r="",i=n.charCodeAt(0);++a<o;){if(0===(t=n.charCodeAt(a)))throw new InvalidCharacterError("Invalid character: the input contains U+0000.");r+=1<=t&&t<=31||127==t||0===a&&48<=t&&t<=57||1===a&&48<=t&&t<=57&&45===i?"\\"+t.toString(16)+" ":128<=t||45===t||95===t||48<=t&&t<=57||65<=t&&t<=90||97<=t&&t<=122?n.charAt(a):"\\"+n.charAt(a)}return"#"+r}function O(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)}function I(e,t,n,o){t.emitEvents&&"function"==typeof E.CustomEvent&&(t=new CustomEvent(e,{bubbles:!0,detail:{anchor:n,toggle:o}}),document.dispatchEvent(t))}var M={ignore:"[data-scroll-ignore]",header:null,topOnEmptyHash:!0,speed:500,speedAsDuration:!1,durationMax:null,durationMin:null,clip:!0,offset:0,easing:"easeInOutCubic",customEasing:null,updateURL:!0,popstate:!0,emitEvents:!0};return function(a,e){function t(e){if(!e.defaultPrevented&&!(0!==e.button||e.metaKey||e.ctrlKey||e.shiftKey)&&"closest"in e.target&&(r=e.target.closest(a))&&"a"===r.tagName.toLowerCase()&&!e.target.closest(g.ignore)&&r.hostname===E.location.hostname&&r.pathname===E.location.pathname&&/#/.test(r.href)){var t;try{n=i(decodeURIComponent(r.hash))}catch(e){n=i(r.hash)}if("#"===n){if(!g.topOnEmptyHash)return;t=document.documentElement}else t=document.querySelector(n);(t=t||"#top"!==n?t:document.documentElement)&&(e.preventDefault(),n=g,history.replaceState&&n.updateURL&&!history.state&&(o=(o=E.location.hash)||"",history.replaceState({smoothScroll:JSON.stringify(n),anchor:o||E.pageYOffset},document.title,o||E.location.href)),v.animateScroll(t,r))}var n,o}function n(e){var t;null===history.state||!history.state.smoothScroll||history.state.smoothScroll!==JSON.stringify(g)||"string"==typeof(t=history.state.anchor)&&t&&!(t=document.querySelector(i(history.state.anchor)))||v.animateScroll(t,null,{updateURL:!1})}var g,r,y,S,v={cancelScroll:function(e){cancelAnimationFrame(S),S=null,e||I("scrollCancel",g)}};v.animateScroll=function(o,a,e){v.cancelScroll();var r,i,s,c,u,l,d,f,m,t,h=b(g||M,e||{}),p="[object Number]"===Object.prototype.toString.call(o),e=p||!o.tagName?null:o;(p||e)&&(r=E.pageYOffset,h.header&&!y&&(y=document.querySelector(h.header)),t=(t=y)?parseInt(E.getComputedStyle(t).height,10)+t.offsetTop:0,c=p?o:function(e,t,n,o){var a=0;if(e.offsetParent)for(;a+=e.offsetTop,e=e.offsetParent;);return a=Math.max(a-t-n,0),a=o?Math.min(a,O()-E.innerHeight):a}(e,t,parseInt("function"==typeof h.offset?h.offset(o,a):h.offset,10),h.clip),u=c-r,l=O(),d=0,t=(e=h).speedAsDuration?e.speed:Math.abs(u/1e3*e.speed),f=e.durationMax&&t>e.durationMax?e.durationMax:e.durationMin&&t<e.durationMin?e.durationMin:parseInt(t,10),m=function(e){var t,n;d+=e-(i=i||e),s=r+u*(t=s=1<(s=0===f?0:d/f)?1:s,"easeInQuad"===h.easing&&(n=t*t),"easeOutQuad"===h.easing&&(n=t*(2-t)),"easeInOutQuad"===h.easing&&(n=t<.5?2*t*t:(4-2*t)*t-1),"easeInCubic"===h.easing&&(n=t*t*t),"easeOutCubic"===h.easing&&(n=--t*t*t+1),"easeInOutCubic"===h.easing&&(n=t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===h.easing&&(n=t*t*t*t),"easeOutQuart"===h.easing&&(n=1- --t*t*t*t),"easeInOutQuart"===h.easing&&(n=t<.5?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===h.easing&&(n=t*t*t*t*t),"easeOutQuint"===h.easing&&(n=1+--t*t*t*t*t),"easeInOutQuint"===h.easing&&(n=t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t),(n=h.customEasing?h.customEasing(t):n)||t),E.scrollTo(0,Math.floor(s)),function(e,t){var n=E.pageYOffset;if(e==t||n==t||(r<t&&E.innerHeight+n)>=l)return v.cancelScroll(!0),e=t,n=p,0===(t=o)&&document.body.focus(),n||(t.focus(),document.activeElement!==t&&(t.setAttribute("tabindex","-1"),t.focus(),t.style.outline="none"),E.scrollTo(0,e)),I("scrollStop",h,o,a),!(S=i=null)}(s,c)||(S=E.requestAnimationFrame(m),i=e)},0===E.pageYOffset&&E.scrollTo(0,0),e=o,p||history.pushState&&h.updateURL&&history.pushState({smoothScroll:JSON.stringify(h),anchor:e.id},document.title,e===document.documentElement?"#top":"#"+e.id),"matchMedia"in E&&E.matchMedia("(prefers-reduced-motion)").matches?E.scrollTo(0,Math.floor(c)):(I("scrollStart",h,o,a),v.cancelScroll(!0),E.requestAnimationFrame(m)))};if(v.destroy=function(){g&&(document.removeEventListener("click",t,!1),E.removeEventListener("popstate",n,!1),v.cancelScroll(),S=y=r=g=null)},"querySelector"in document&&"addEventListener"in E&&"requestAnimationFrame"in E&&"closest"in E.Element.prototype)return v.destroy(),g=b(M,e||{}),y=g.header?document.querySelector(g.header):null,document.addEventListener("click",t,!1),g.updateURL&&g.popstate&&E.addEventListener("popstate",n,!1),v;throw"Smooth Scroll: This browser does not support the required JavaScript methods and browser APIs."}});
var LMstickyMenu=function(){var t=document.querySelector("#header-outer").getBoundingClientRect().height,n=document.querySelector("#navmenu-wrap-sticky"),e=document.querySelector(".nav-copy"),i=document.querySelector(".nav-original"),r=document.querySelector(".sidebar-sticky");stickyClass="navsticky-show",null!=i&&(e.innerHTML=i.innerHTML);null!=i&&(window.addEventListener("resize",function(){t=document.querySelector("#header-outer").getBoundingClientRect().height}),window.addEventListener("scroll",function(){var e=Math.round(window.pageYOffset);t<=e?n.classList.add(stickyClass):n.classList.remove(stickyClass)})),null!=r&&(r.style.top="88px");for(var c=document.querySelectorAll(".menu-sticky a"),o=0;o<c.length;o++)c[o].setAttribute("tabindex","-1")};!function(){var e={menuSticky:!0};optionLinkMagz(e),1==e.menuSticky&&LMstickyMenu()}();
function LMmobileMenu(){function e(e){e.preventDefault,i.classList.add(o)}for(var n=document.querySelector(".navmenu-content"),t=document.querySelector("#navmenu-sidebar-body"),u=document.querySelectorAll(".navmenu-button"),l=document.querySelector("#navmenu-overlay"),s=document.querySelector("#navmenu-sidebar-closebtn"),i=document.querySelector("#navmenu"),o="navmenu-activated",r=(null!==n&&(t.innerHTML=n.innerHTML),0);r<u.length;r++)u[r].addEventListener("click",e);function c(e){e.preventDefault,i.classList.remove(o)}null!==l&&l.addEventListener("click",c),null!==s&&s.addEventListener("click",c)}function LMmobileMenuSubMenu(){"use strict";for(var e=document.querySelectorAll("#navmenu-sidebar-body li.has-sub"),n=function(e){var n=this.nextElementSibling,t=n.scrollHeight;n.clientHeight?(n.style.height="0px",this.classList.remove("ms-submenu-shown")):(n.style.height=t+"px",this.classList.add("ms-submenu-shown"))},t=0;t<e.length;t++){u=void 0,(u=document.createElement("span")).setAttribute("class","ms-submenu-button");var u,l=e[t].querySelector("ul");e[t].insertBefore(u,e[t].lastElementChild),l&&(l.style.height="0",l.style.overflow="hidden"),u.addEventListener("click",n)}}LMmobileMenu(),LMmobileMenuSubMenu();
function LMsearchForm(){for(var n=document.getElementById("searchcontainer"),t=document.getElementById("search-terms"),e=document.querySelectorAll(".iconsearch-label"),c=0;c<e.length;c++)e[c].addEventListener("click",function(e){n.classList.toggle("opensearch"),n.classList.contains("opensearch")||(t.blur(),e.preventDefault()),e.stopPropagation()},!1);t.addEventListener("click",function(e){e.stopPropagation()},!1),document.addEventListener("click",function(e){n.classList.remove("opensearch"),t.blur(),e.stopPropagation()},!1),document.addEventListener("keydown",function(e){"Escape"==e.key&&(n.classList.remove("opensearch"),t.blur())})}LMsearchForm();
function LMcheckCheckbox(){for(var e=document.querySelectorAll(".checkbox"),o=0;o<e.length;o++)"darkmode"===localStorage.getItem("mode")?e[o].checked=!0:e[o].checked=!1}function darkMode(){localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),"darkmode"===localStorage.getItem("mode")?document.querySelector("body").classList.add("darkmode"):document.querySelector("body").classList.remove("darkmode"),LMcheckCheckbox()}LMcheckCheckbox();
!function(){var e=document.querySelectorAll(".darkmode-switch"),o={tombolDarkmode:!0};if(optionLinkMagz(o),0==o.tombolDarkmode)for(var l=0;l<e.length;l++)e[l].parentNode.removeChild(e[l]);else for(l=0;l<e.length;l++)e[l].style.display="flex"}();
var LMScrollTop=function(){var o=document.querySelector("#goTop");window.addEventListener("scroll",function(){300<=window.pageYOffset?o.classList.add("is-visible"):o.classList.remove("is-visible")})};!function(){var o={scrollToTop:!0};optionLinkMagz(o),1==o.scrollToTop&&LMScrollTop()}();
!function(){var r,e=document.querySelector(".featured-img-bg");function t(e){let t=r.getAttribute(e);t&&(t=t.replace(/-p-k-no-nu/g,"-c-rw"),r.setAttribute(e,t))}e&&(r=e.querySelector("img"),t("data-src"),t("srcset"))}();
//]]>
//<![CDATA[
/* TOC js from www.cssscript.com/generating-a-table-of-contents-with-pure-javascript-toc */
!function(e){function t(e){var t=(e=function(e,t){for(var n in t)t.hasOwnProperty(n)&&t[n]&&(e[n]=t[n]);return e}({selector:"h1, h2, h3, h4, h5, h6",scope:"body",overwrite:!1,prefix:"toc"},e)).selector;if("string"!=typeof t)throw new TypeError("selector must be a string");if(!t.match(/^(?:h[1-6],?\s*)*$/g))throw new TypeError("selector must contains only h1-6");var n,c,l,a,o=location.hash;return o&&setTimeout(function(){location.hash="",location.hash=o},0),e=(t=e).selector,n=t.scope,c=document.createElement("ol"),l=c,a=i(t.overwrite,t.prefix),r(e,n).reduce(function(e,t,n){var o=u(t.tagName),e=d(l,o-e)||c,r=document.createElement("li"),i=document.createElement("a");return a(t,i,n),e.appendChild(r).appendChild(i),l=r,o},u(e)),c}var r=function(t,e){var n=[],e=document.querySelectorAll(e);return Array.prototype.forEach.call(e,function(e){e=e.querySelectorAll(t);n=n.concat(Array.prototype.slice.call(e))}),n},u=function(e){if("string"!=typeof e)return 0;e=e.match(/\d/g);return e?Math.min.apply(null,e):1},d=function(e,t){if(t<0)return d(e.parentElement,t+1);if(0<t){for(var n=e,o=t;o--;){var r=document.createElement("ol");n.appendChild(r),n=r}return n}return e.parentElement},i=function(o,r){return function(e,t,n){e.textContent;n=r+"-"+n,t.textContent=e.textContent,n=!o&&e.id||n,n=encodeURIComponent(n);e.id=n,t.href="#"+n}};"function"==typeof define&&define.amd?define("toc",[],function(){return t}):e.initTOC=t}(window);var aside=document.getElementById("toc"),toc=initTOC({selector:"h2, h3",scope:".post-body"});function tocShowHide(){var t={tocHide:!0,showText:"(show)",hideText:"(hide)"},e=(optionLinkMagz(t),document.querySelector(".toc")),n=document.createElement("button"),o=document.querySelector("#toc ol");e.appendChild(n),o.style.height="0",o.style.overflow="hidden",n.innerHTML=t.showText,n.addEventListener("click",function(){var e=o.scrollHeight;o.clientHeight?(o.style.height="0",n.innerHTML=t.showText):(o.style.height=e+"px",n.innerHTML=t.hideText)})}function tocOption(){var e=document.querySelector(".toc"),t={judulTOC:"Daftar Isi",showHideTOC:!0};optionLinkMagz(t),null!=e&&(e.innerHTML=t.judulTOC),tocShowHide()}null!=aside&&(aside.appendChild(toc),tocOption());
//]]>
//<![CDATA[
Defer.dom("img.lazyload",100,"loaded",null,{rootMargin:"1px"}),"undefined"!=typeof infinite_scroll&&infinite_scroll.on("load",function(){Defer.dom("img.lazyload",100,"loaded",null,{rootMargin:"1px"})});var scroll=new SmoothScroll('a[href*="#"]',{speed:600,speedAsDuration:!0,easing:"easeInOutCubic"});
//]]>
</script>
<div class='custom-javascript-footer section' id='custom-javascript-footer'><div class='widget HTML' data-version='2' id='HTML85'>
</div></div>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3138155095-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY6JTZY0wzsolwo0ZdHkOWComUwYdg:1727584246060';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3834082797626405161','//bobstrollergrandsale.blogspot.com/2023/10/bad-quality-for-100-both-width-and.html','3834082797626405161');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3834082797626405161', 'title': 'javascript edu ', 'url': 'https://bobstrollergrandsale.blogspot.com/2023/10/bad-quality-for-100-both-width-and.html', 'canonicalUrl': 'https://bobstrollergrandsale.blogspot.com/2023/10/bad-quality-for-100-both-width-and.html', 'homepageUrl': 'https://bobstrollergrandsale.blogspot.com/', 'searchUrl': 'https://bobstrollergrandsale.blogspot.com/search', 'canonicalHomepageUrl': 'https://bobstrollergrandsale.blogspot.com/', 'blogspotFaviconUrl': 'https://bobstrollergrandsale.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22javascript edu - Atom\x22 href\x3d\x22https://bobstrollergrandsale.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22javascript edu - RSS\x22 href\x3d\x22https://bobstrollergrandsale.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22javascript edu - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3834082797626405161/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22javascript edu - Atom\x22 href\x3d\x22https://bobstrollergrandsale.blogspot.com/feeds/575848013877651776/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/d9db63b9119a00a5', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '575848013877651776', 'pageName': 'Bad Quality For 100% Both Width And Height Of Canvas', 'pageTitle': 'javascript edu : Bad Quality For 100% Both Width And Height Of Canvas'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Bad Quality For 100% Both Width And Height Of Canvas', 'description': 'I have done a very tiny example with canvas, it\x27s available on JsFiddle: http://jsfiddle.net/yPtr5/ \x3c/title\x26\x3c/div\x3e\x3ch2 id\x3d\x22solution_1\x22\x3eSoluti...', 'url': 'https://bobstrollergrandsale.blogspot.com/2023/10/bad-quality-for-100-both-width-and.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 575848013877651776}}, {'name': 'widgets', 'data': [{'title': 'Kode Pengaturan Template', 'type': 'HTML', 'sectionId': 'template-settings', 'id': 'HTML70'}, {'title': 'Custom CSS', 'type': 'HTML', 'sectionId': 'custom-css', 'id': 'HTML82'}, {'title': 'javascript edu (Header)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header1'}, {'title': 'Kode Icon Media Sosial', 'type': 'HTML', 'sectionId': 'social-button', 'id': 'HTML71'}, {'title': 'Kode Menu Navigasi', 'type': 'HTML', 'sectionId': 'navmenu', 'id': 'HTML72'}, {'title': 'Widget HTML #1', 'type': 'HTML', 'sectionId': 'top-widget', 'id': 'HTML73'}, {'title': 'Widget HTML #2 (homepage)', 'type': 'HTML', 'sectionId': 'top-widget2', 'id': 'HTML421'}, {'title': 'Featured Post', 'type': 'FeaturedPost', 'sectionId': 'main-content', 'id': 'FeaturedPost1', 'postId': '920445562743675274'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'main-content', 'id': 'Blog1', 'posts': [{'id': '575848013877651776', 'title': 'Bad Quality For 100% Both Width And Height Of Canvas', 'showInlineAds': true}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': ''}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comments'}, {'name': 'icons', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'Comments'}, {'name': 'icons', 'label': ''}, {'name': 'labels', 'label': ''}]}, {'title': 'Widget HTML (label produk)', 'type': 'HTML', 'sectionId': 'html-produk', 'id': 'HTML74'}, {'title': 'Widget HTML (label jasa)', 'type': 'HTML', 'sectionId': 'html-jasa', 'id': 'HTML75'}, {'title': 'Kode Iklan Atas', 'type': 'HTML', 'sectionId': 'iklan-atas', 'id': 'HTML76'}, {'title': 'Kode Iklan Tengah 1', 'type': 'HTML', 'sectionId': 'iklan-tengah1', 'id': 'HTML77'}, {'title': 'Kode Iklan Tengah 2', 'type': 'HTML', 'sectionId': 'iklan-tengah2', 'id': 'HTML78'}, {'title': 'Kode Iklan Bawah', 'type': 'HTML', 'sectionId': 'iklan-bawah', 'id': 'HTML79'}, {'title': 'Kode Iklan Matched Content', 'type': 'HTML', 'sectionId': 'matched-content', 'id': 'HTML939'}, {'title': 'Kode Iklan In-Feed (homepage)', 'type': 'HTML', 'sectionId': 'iklan-infeed', 'id': 'HTML83'}, {'title': '', 'type': 'HTML', 'sectionId': 'sidebar', 'id': 'HTML1'}, {'title': 'Top Question', 'type': 'PopularPosts', 'sectionId': 'sidebar', 'id': 'PopularPosts1', 'posts': [{'title': 'Split Comma Separated String By Comma', 'id': 411069843922119807}, {'title': 'Changing Font Size Options On WYSIWYG Editor?', 'id': 5229283404262527467}, {'title': 'What Is The Correct Way To \x22serialize\x22 Functions In Javascript For Later Use', 'id': 2545706980134406723}, {'title': 'Bootstrap Counter Start On Display', 'id': 5532448897288362592}, {'title': 'Select And Unselect All Checkboxes', 'id': 1719387717936835792}, {'title': 'How Does Node.JS Work As Opposed To PHP?', 'id': 2913063128887571030}, {'title': 'Dropdown Menu On Refresh Changes Javascript', 'id': 1275805060727888054}, {'title': 'Logic For The Next Button For The Questionnaire?', 'id': 4200394027922101166}, {'title': 'Issue With Floating Buttons Right Of My To Do List', 'id': 2758446263646506754}, {'title': 'Three.js - Scale Model With Scale.set() Or Increase Model Size?', 'id': 3723493563572074561}]}, {'title': '', 'type': 'BlogArchive', 'sectionId': 'sidebar-sticky', 'id': 'BlogArchive1'}, {'title': 'Widget HTML #3', 'type': 'HTML', 'sectionId': 'footer-widget-html', 'id': 'HTML831'}, {'title': 'Menu Halaman Statis', 'type': 'PageList', 'sectionId': 'page-navmenu', 'id': 'PageList1'}, {'title': 'Teks Footer', 'type': 'HTML', 'sectionId': 'footer-text', 'id': 'HTML80'}, {'title': 'Navbar', 'type': 'Navbar', 'sectionId': 'navbarrr', 'id': 'Navbar1'}, {'title': 'Custom JavaScript Footer', 'type': 'HTML', 'sectionId': 'custom-javascript-footer', 'id': 'HTML85'}]}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML70', 'template-settings', document.getElementById('HTML70'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML82', 'custom-css', document.getElementById('HTML82'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML71', 'social-button', document.getElementById('HTML71'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML72', 'navmenu', document.getElementById('HTML72'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML73', 'top-widget', document.getElementById('HTML73'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML421', 'top-widget2', document.getElementById('HTML421'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost1', 'main-content', document.getElementById('FeaturedPost1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main-content', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3155624978-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML74', 'html-produk', document.getElementById('HTML74'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML75', 'html-jasa', document.getElementById('HTML75'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML76', 'iklan-atas', document.getElementById('HTML76'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML77', 'iklan-tengah1', document.getElementById('HTML77'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML78', 'iklan-tengah2', document.getElementById('HTML78'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML79', 'iklan-bawah', document.getElementById('HTML79'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML939', 'matched-content', document.getElementById('HTML939'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML83', 'iklan-infeed', document.getElementById('HTML83'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar-sticky', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML831', 'footer-widget-html', document.getElementById('HTML831'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'page-navmenu', document.getElementById('PageList1'), {'title': 'Menu Halaman Statis', 'links': [{'isCurrentPage': false, 'href': 'https://bobstrollergrandsale.blogspot.com/', 'title': 'Beranda'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML80', 'footer-text', document.getElementById('HTML80'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbarrr', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML85', 'custom-javascript-footer', document.getElementById('HTML85'), {}, 'displayModeFull'));
</script>
</body>
</html>